jQuery 用户界面 : Draggable clone and change clone

Question

我有按钮 <div class='button' data-tag='h1'>Drag to insert h1 tag</div>

当你拖动它时，我希望按钮留在原来的位置，助手是 <h1>Example</h1>在你放下它的地方，你会放下h1没有任何可拖动或 jQuery UI 样式的标记。

所以:

你从按钮中拖出一些东西 > 你有 h1在空中标记，你掉落无样式h1标签。

我有这个:

        var html = "<h1>Example</h1>";
        $('.button').draggable({
            connectToSortable: '.drop-area',
            containment: 'document',
            helper: function(){ return $(html); }
        });

它使 helper 成为 h1标签，但是当我放下它时，放下的项目是按钮，而不是 h1标签。

换句话说，我有很多带有各种 html 标签或结构的按钮。这些按钮仅显示标签的名称，当您拖动它时，您会看到要删除的真实标签。

Answer 1

在您的 drop 函数中，您可以使用 ui.draggable 访问原始拖动的项目，因此您可以克隆它并将其附加到可放置元素中。

快速引用:

draggable - Type: jQuery - A jQuery object representing the draggable element.

helper - Type: jQuery - A jQuery object representing the helper that is being dragged.

文档:http://api.jqueryui.com/droppable/#event-drop

代码:

$(function () {
    var html = "<h1>Example</h1>";
        $('.button').draggable({
            connectToSortable: '.drop-area',
            containment: 'document',
            helper: function(){ return $(html); }
        });
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
        }
    });
});

演示:http://jsfiddle.net/IrvinDominin/Cp6Rr/