Question

在运行时创建sortables时，我们如何处理应该连接到sortables的连接可拖动项目？例如：

<ul class='sortable'>
</ul>

当用户点击按钮时，我创建了上述可排序ul的实例：

function onBtnClick1() {
    var element = $("<ul class='sortable'></ul>");
    element.appendTo("#body");
    $(".sortable").sortable();  // make it sortable?
}

稍后，用户可以生成要拖放到任何可排序项中的项目：

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable();
    element.draggable("option", "connectToSortable", '.sortable');
}

它不起作用 - 我基本上想把上面的draggables droppable变成任何类型为“sortable”的ul。什么是正确的方法？

由于

Answer 1

你应该再设置两个可拖动选项以使其正常工作

element.draggable("option", "helper", 'clone');
element.draggable("option", "revert", 'invalid');

请参阅connectToSortable和sortable draggable demo

的文档

完整的功能应该如下所示

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable({
        connectToSortable: '.sortable',
        helper: 'clone',
        revert: 'invalid',
        appendTo: '#container'
    });
}

在运行时创建sortables？

1 个答案: