使用jquery拖放，按钮拖放和div拖放答案

【问题标题】：Drag and drop with jquery, button drag and div drop使用jquery拖放，按钮拖放和div拖放
【发布时间】：2013-06-20 10:44:41
【问题描述】：

我想用 jQuery 实现一个解决方案，其中一个按钮可以拖动到某个 div 元素。当它被放入该 div 时，它应该具有自定义的 html。

我在 jsfiddle 上找到了一个示例，但不幸的是 SO 没有提供到 jsfiddle 的链接。我在这里粘贴所有代码：

HTML

<ul id="left-pane">
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
</ul>

<ul id="right-pane">
</ul>

CSS

#left-pane
{
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

#right-pane
{
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

JavaScript / jQuery

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});

$("#right-pane li").live('dblclick', function () {
    $(this).remove();
})

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).find('.single-item').length == 0)
        {
            $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
        }
    }
});

$("#left-pane").droppable({
    accept: "#right-pane li",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

我想要与上面类似的东西，但我想将图像更改为某个按钮而不是 UI 元素，可以将其更改为普通 div 吗？

有人可以玩这个小提琴并为我提供一个简单的拖放解决方案吗？

提前致谢。

【问题讨论】：

你可以链接到小提琴，只要你也发布代码
@pete：谢谢，它有效。我自己找到了解决方案并添加了与答案相同的内容。我希望它也可以帮助其他编码人员。

标签： jquery drag-and-drop jquery-ui-draggable

【解决方案1】：

我想，我自己通过玩上面的代码找到了解决方案。我在按钮上做错了，因为按钮已经映射了单击事件，这就是为什么当我尝试拖动按钮时它无法使用拖动事件。我只是尝试添加 div 元素，它显示为按钮（样式为 css），它的工作方式就像我想要的那样。

我只需要更改 html 代码：

<ul id="left-pane">
   <li><div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div>
</ul>

<ul id="right-pane">
</ul>

这是我正在寻找的最终解决方案：http://jsfiddle.net/Y7RmR/77/

【讨论】：