如何將可排序的div拖放到外部元素

我想拖動可排序容器的div並將它們拖放到可放置div（不可排序）。我曾嘗試使用HTML5拖放事件，但沒有一個被解僱。最重要的是，可排序容器上的dragstart事件未被觸發。有人可以建議我一個解決方案。我只想要啓動dragstart事件。這是我的完整代碼：如何將可排序的div拖放到外部元素

基本上我們克隆元素被拖動並追加它可放開對drop event，因爲jQuery UI的在我們拋出錯誤：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Sortable - Handle empty divsts</title> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
     <style> 
      .draggableDivs{ 
       background-color: orange; 
       border: solid black;  
      } 
     </style> 
    </head> 
    <body> 
     <div id="sortable" style="float: left;"> 
      <div class="draggableDivs" draggable="true">Can be dropped !!..</div> 
      <div class="draggableDivs" draggable="true">..on an empty list</div> 
      <div class="draggableDivs" draggable="true">Item 3</div> 
      <div class="draggableDivs" draggable="true">Item 4</div> 
      <div class="draggableDivs" draggable="true">Item 5</div> 
     </div> 
     <div id="dropTarget" style="width: 500px; height: 500px; background-color: skyblue; float: left; text-align: center"> 
      <h4>Drop Here</h4> 
     </div> 
     <script> 

      $("#sortable").sortable(); 

      document.getElementById('sortable').addEventListener('dragstart', function(evt) { 
       console.log("The 'dragstart' event fired."); 
       evt.dataTransfer.setData('text', evt.target.textContent); 
      }, false); 

     </script> 
    </body> 
</html>

來源

2014-10-31 Quick_Silver

你在哪裏設置divs是可拖動的？ 'draggable =「true」' – 2014-10-31 10:11:10

您需要爲div＃droppable添加jQuery代碼 $（「#droppable」）.droppable（{accept：「div」}）; – WisdmLabs 2014-10-31 10:16:13

@Darren，我認爲可排序的元素默認是可拖動的。請糾正我，如果我worng。 – 2014-10-31 10:24:43

可以實現的功能使用jQuery用戶界面如下如果我們刪除被拖動的元素。

然後我們刪除stop event回調中的實際元素。

$("#sortable").sortable(); 
 
$("#dropTarget").droppable({ 
 
    accept: "div", 
 
    drop: function(event, ui) { 
 
    ui.draggable.clone().appendTo(this); 
 
    ui.draggable.remove(); 
 
    } 
 
})

#sortable { 
 
    float: left; 
 
} 
 
.draggableDivs { 
 
    background-color: orange; 
 
    border: solid black; 
 
} 
 
#dropTarget { 
 
    width: 500px; 
 
    height: 500px; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: skyblue; 
 
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="sortable"> 
 
    <div class="draggableDivs">Can be dropped !!..</div> 
 
    <div class="draggableDivs">..on an empty list</div> 
 
    <div class="draggableDivs">Item 3</div> 
 
    <div class="draggableDivs">Item 4</div> 
 
    <div class="draggableDivs">Item 5</div> 
 
</div> 
 
<div id="dropTarget"> 
 
    <h4>Drop Here</h4> 
 

 
</div>

旁註：

請勿混用機拖動，並與jQuery UI的下降。
請勿混用內聯樣式和內部/外部樣式。儘可能避免使用內聯樣式。 Why Use CSS?

來源

2014-10-31 18:53:12

非常感謝您提供詳細的解決方案和建議。但是，當我使用jquery droppable時，丟棄的元素不會在內部放置目標w.r.t。也就是說，丟棄的元素相對於屏幕被定位。請讓我知道我如何將它們定位爲放置目標的內部元素？我的意思是放置的元素應該放置在另一個下面，而不是放在任何將它們放在屏幕上的位置。 – 2014-11-03 06:07:45

@Quick_Silver爲此，您可以簡單地從克隆元素中移除由jquery ui注入的樣式...請參閱此[jsfiddle]（http://jsfiddle.net/221catyL/）。您可以根據需要使用css – 2014-11-03 09:13:04

來設計放置區域內物品的外觀。非常感謝。您的解決方案非常簡單明瞭。我接受你的答案。 – 2014-11-03 09:16:14

如何將可排序的div拖放到外部元素

回答

相關問題