如何将可排序的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>

你在哪里设置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?

非常感谢您提供详细的解决方案和建议。但是，当我使用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拖放到外部元素

相关推荐