我有一个可拖动项列表，我希望能够将它们拖动到可排序的内容 block 上。这是我的标记:

<div class='items'>
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

<div class="content">
    <div class="block">Foo</div>
    <div class="block">Bar</div>
</div>

问题是，我希望拖动的项目在拖动开始时“变成”一个 block ，并在它被放下时保持一个 block 。我试过这个:

$('.items div').draggable({
    helper: function(e) {
        return $('<div>').addClass('block').text( $(e.target).text() );
    },
    connectToSortable: ".content"
});

$('.content').sortable();​

fiddle :http://jsfiddle.net/MF4qu/

但即使我创建了一个看起来像 block 的自定义助手，它也会在拖放后立即恢复为原始拖动元素。有谁知道如何在我的示例页面中正确插入 block ？我已经查看了 UI API，但我无法理解。

​

最佳答案

当 draggable 元素被放入 sortable 时，它​​会触发 sortable update 事件。一种解决方案是监听该事件，并将掉落的元素变成一个方 block :

$('.items div').draggable({
    helper: function(e) {
        return $('<div>').addClass('block').text( $(e.target).text() );
    },
    connectToSortable: ".content"
});

$('.content').sortable({
    update: function (event, ui) {
        ui.item.addClass('block');
    }
});​

工作演示: http://jsfiddle.net/DaXuT/1/

关于javascript - jQuery UI draggable element dropped into sortable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12625935/