拖放API不起作用

我正在为我的软件工程课程开展一个小组项目。长话短说我试图使用拖放HTML API，但我没有任何运气。下面是我试图实现拖放的页面的html。项目中有多个文件，因为这是一个网站，如果没有足够的信息，我会根据请求上传其他文件。在下面的HTML文件中，我试图做的是将hello<p>放入div1<div>。拖放API不起作用

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Fundamentals of SE (Scratchat)</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
     <!-- jQuery cdn --> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
     <link rel="stylesheet" href="css/main.css"> 
     <script> 
      function openNav() { 
       document.getElementById("mySidenav").style.width = "250px"; 
       document.getElementById("main").style.marginLeft = "250px"; 
      } 

      function closeNav() { 
       document.getElementById("mySidenav").style.width = "0"; 
       document.getElementById("main").style.marginLeft= "0"; 
      } 
      function allowDrop(ev) { 
       ev.preventDefault(); 
      } 

      function drag(ev) { 
       ev.dataTransfer.setData("text", ev.target.id); 
      } 

      function drop(ev) { 
       ev.preventDefault(); 
       var data = ev.dataTransfer.getData("text"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
     </script> 
    </head> 
    <body> 

     <div id="mySidenav" class="sidenav"> 
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
      <a href="index.html">Home</a> 
      <a href="aboutus.html">About us</a> 
      <a href="features.html">Features</a> 
      <a href="#">Build</a> 
      <a href="tutorial.html">Tutorial</a> 
      <a href="https://scratch.mit.edu/about">About Scratch</a> 
     </div> 

     <div id="main"> 
      <span style="font-size:30px;cursor:pointer; color: #white" onclick="openNav()">&#9776;</span> 
     </div> 

     <div class="div1" style="height: 100px; width: 100%; border: solid 2px black" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"> 

     </div> 

<!-- 
     <div class="container"> 
      <div class="jumbotron" ondrop="drop(event)" ondragover="allowDrop(event)"> 
       <div id="scratchWindow" style="padding-top: 200px; padding-bottom: 200px;"> 

       </div> 
      </div> 
     </div> 
--> 

     <div class="question" draggable="true" ondragstart="drag(event)"> 
      <p> 
       Hello 
<!--    
       <label>What Question Do You Want Your Bot To Ask?</label><br> 
       <textarea 
        id = "Question" 
        rows = 3 
        cols = 20>Your Question Here</textarea> 
--> 
      </p> 
     </div> 
    </body> 
</html>

这里是CSS文件中全球使用横跨网址：

.jumbotron { 
    background-image: url("../res/robot-customer-service.png"); 
    background-position: 0% 25%; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin-top: 20px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
} 

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background: white; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #1974fc; 
    display: block; 
    transition: 0.3s; 
} 

.sidenav a:hover { 
    color: #36bac3; 
} 

.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

#main { 
    transition: margin-left .5s; 
    padding: 16px; 
} 

@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
} 

body { 

    background: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/colortheory.jpg"); 
}

来源

2017-10-22 user2172993

你检查错误报告，您的浏览器控制台？如果不是，我建议你看看，如果你有任何问题，请将它们包含在你的问题中。 – NewToJS

@NewToJS不是我没有，但有一个错误，返回'未捕获TypeError：无法执行'节点'上的'appendChild'：参数1不是类型'节点'。 at drop（scratchat.html：30） at HTMLDivElement.ondrop（scratchat.html：50）' – user2172993

也许这会帮助你[** Developer Mozilla DataTransfer/getData API **]（https：//developer.mozilla。 org/en-US/docs/Web/API/DataTransfer/getData） – NewToJS

的问题是你抓住了整个div而不只是text。

给你的款 - <p>元素的id和你draggable & ondragstart属性添加到它。

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft = "0"; 
 
} 
 

 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}

<div class="div1" style="height: 100px; width: 100%; border: solid 2px black" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
</div> 
 
<div class="question"> 
 
    <p id="hello" draggable="true" ondragstart="drag(event)"> 
 
    Hello 
 
    </p> 
 
</div>

来源

2017-10-22 03:30:59 kemotoe

将其标记为已接受请不要忘记提及已添加到段落元素的'ID' ....'id =“hello”否则只要将'draggable'和'ondragstart'属性放在段落中就不会在没有添加'id'的情况下工作。 – NewToJS

忘记提及，感谢编辑 – kemotoe

没问题:)它可以避免进一步的混乱，这是一个简单的事情，忘记。 – NewToJS

拖放API不起作用

回答

相关问题