Jquery UI DRAG/DROP，一个 div 工作，另一个不工作。怎么修？答案

【问题标题】：Jquery UI DRAG/DROP, one div works the other does not. how to fix?Jquery UI DRAG/DROP，一个 div 工作，另一个不工作。怎么修？
【发布时间】：2015-09-22 20:04:57
【问题描述】：

我有以下 Jquery UI 拖放 jsfiddle https://jsfiddle.net/zoojsfiddle/ud96jdcp/

     <div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg"></div>  

    <div id="drag1" class="dragImg" title="Start Button"></div> <!-- end of drag1 -->            

   <div id="dropHere"></div>

图标较大的 div 适用于第一个 div，您可以在有边框的 div 中拖放和移动，并将其包含在内。具有较小图标的 div，即 2nd div，将不允许拖放。据我所见，它们产生了相同的 div ，只有第二个使用了 css。如何修复第二个 div 以使拖放工作。感谢观看。

【问题讨论】：

标签： jquery drag-and-drop

【解决方案1】：

您的第二个可拖动对象需要拖动内容。也许将图像元素添加到#drag1：

        <div id="drag1" class="dragImg" title="Start Button"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg"></div>

然后给#drag1中的图片元素添加一些样式：

#drag1 .img{
width:32px;
height:32px;
}

【讨论】：

【解决方案2】：

它对你有 class="dragImg" 的 div 进行拖动，但由于它没有任何底层标签，所以它似乎没有。您所要做的就是将 id="drag1" 的 div 包装在另一个 class="dragImg" 的 div 中。

<div class="dragImg">
        <div id="drag1" title="Start Button">          
        </div>

https://jsfiddle.net/ud96jdcp/6/

【讨论】：

【解决方案3】：

问题在于您的第二个元素 "#drag1" 。该函数没有任何可克隆的内容。它需要某种内部 HTML dom 结构。第一个有效，因为它正在克隆图像并将其附加到您的拖放区。

尝试将此作为您的第二个元素：
https://jsfiddle.net/ud96jdcp/11/

在这个版本中，我修改了 css 以将背景图像添加到 .test 类而不是 #drag1 https://jsfiddle.net/ud96jdcp/13/

<div id="drag1" class="dragImg" title="Start Button"><div class="test">testing</div></div>

【讨论】：

【解决方案4】：

简短的回答：您正在将一个 div 拖到您的目标中，只是缺少 css。

更长的答案：您可以将小提琴中的 css 更改为

.drag1 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg");
    width:32px;
    height:32px;
}

和html部分

<div id="drag1" class="dragImg drag1" title="Start Button"></div> <!-- end of drag1 -->

您将能够看到您一直成功拖放的div。

演示：https://jsfiddle.net/Lbt28duj/

【讨论】：