如何将可排序的 div 拖到外部元素上答案

【问题标题】：how to drag sortable divs on to a foreign element如何将可排序的 div 拖到外部元素上
【发布时间】：2014-10-31 10:04:15
【问题描述】：

我想将可排序容器的 div 拖放到可放置的 div（不可排序）上。我曾尝试使用 html5 拖放事件，但没有一个被触发。最重要的是，可排序容器上的 dragstart 事件不会被触发。有人可以建议我一个解决方案。我只想触发 dragstart 事件。这是我的完整代码：

<!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>

【问题讨论】：

你在哪里设置 div 是可拖动的？ draggable="true"
你需要为div添加jQuery代码#droppable $( "#droppable" ).droppable({accept: "div"});
@Darren，我认为可排序元素默认是可拖动的。如果我穿坏了，请纠正我。
@WisdmLabs: 试过 $( "#droppable" ).droppable({accept: "div"});没有运气。
请参阅此 SO 帖子 stackoverflow.com/questions/14308290/…

标签： javascript jquery html jquery-ui

【解决方案1】：

使用jquery ui可以实现如下功能：

基本上，我们克隆被拖动的元素并将其附加到 drop event 上的 droppable，因为如果我们删除被拖动的元素，jQuery ui 会向我们抛出错误。

然后我们删除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 目标。也就是说，放置的元素是相对于屏幕定位的。请您告诉我如何将它们定位为放置目标的内部元素？我的意思是放置的元素应该放在另一个下方，而不是放置在我将它们放置在屏幕上的任何位置。
@Quick_Silver 为此，您可以简单地从克隆元素中删除 jquery ui 注入的样式...参见jsfiddle。您可以使用 css 为放置区域内的项目外观设置样式
非常感谢。您的解决方案非常清晰和简单。我接受你的回答。