jQuery UI 从可排序到自由拖动

Question

我是 jQuery UI 的新手。我需要有一个列表（可排序），我可以从中将元素拖到另一个 div。在那个 div 中，元素需要具有特定的宽度和高度。该元素还需要限制在 div 或列表中拖动。我已经尝试了一些东西并使 documentation 变红，但我无法弄清楚 jet.

这是我试过的：

JQuery UI - Drag from Sortable to Droppable
http://jsfiddle.net/LVtwD/
Drag from sortable to droppable?
http://jqueryui.com/draggable/#sortable

我目前的代码如下： js:

$(function() {
    $('#available').sortable();
    $('#available').disableSelection();

    $('#used').droppable({
        accept: '#available li',
        drop: function (ev, ui) {
           $("<div></div>").html(ui.draggable.html()).appendTo(this);
        }
    });
});

HTML:

<table>
    <tr>
        <td>
            <ul id="available">
                <li style="width: 45px; height: 20px; background: #a0d3e8; border: 1px solid #74bfdd;"><a href="#">Test</a></li>
            </ul>
        </td>

        <td>
            <div id="used" style="width: 400px; height: 500px; border:1px solid #222;"></div>
        </td>
    </tr>
</table>

我知道我可以通过以下方式限制 div 在 div 内的移动： containment: "parent" 我有内联的原因 CSS 是因为宽度和高度的这些值是可变的。

我遇到的问题如下。当列表中的元素被拖动到 div 时，它被添加为列表项而不是 div。宽度和高度也完全消失。

希望有人能帮助我。提前致谢。

Answer 1

这就是我的想法。

$(function() {
    $('#available').sortable();
    $('#available').disableSelection();

    $('.draggable').draggable({ containment: '#used' });
});

jQuery UI 从可排序到自由拖动

jQuery UI from sortable to free drag around

jquery

jquery-ui