jQuery UI可拖动元素被放入可排序 [英] jQuery UI draggable element dropped into sortable

问题描述

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

I have a list of draggable items, and I wish to be able to drag them onto a sortable content block. Here’s my markup:

<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>

事情是，我希望拖动的项目在拖动后成为一个块当它被丢弃时开始并保持一个阻止。我试过这个：

The thing is, that I want the dragged item to "become" a block as soon as the dragging starts and remain a block when it’s dropped. I have tried this:

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

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

小提琴： http://jsfiddle.net/MF4qu/

Fiddle: http://jsfiddle.net/MF4qu/

但即使我创建了一个看起来像块的自定义助手，它一旦被删除就会恢复原始的拖动元素。有谁知道如何在我的示例页面中正确插入一个块？我已经查看了UI API，但我无法弄明白。

But even if I create a custom helper that looks like a block, it reverts back to the original dragged element as soon as it’s dropped. Does anyone know how to properly insert a block in my example page? I already looked through the UI API but I can’t figure it out.

​

推荐答案

当draggable元素被放入sortable时，它会触发可排序的更新事件。一种解决方案是收听该事件，并将删除的项目转换为块：

When the draggable element is dropped into sortable, it triggers the sortable update event. One solution is to listen to that event, and turn the dropped item into a 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');
    }
});​

工作演示： < a href =http://jsfiddle.net/DaXuT/1/> http://jsfiddle.net/DaXuT/1/

这篇关于jQuery UI可拖动元素被放入可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！