拖放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不起作用

回答

相關問題