Question

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

当你拖动它时，我希望按钮保持原样，帮助为<h1>Example</h1>并放置它，你将删除h1标签而没有任何可拖动或jQuery UI样式。

这样：

你从按钮＆gt;中拖出一些东西你在空中获得了h1标签，你放弃了没有标注的h1标签。

我有这个：

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

它帮助成为h1标签，但当我放弃它时，丢弃的项目是按钮，而不是h1标签。

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

Answer 1

在drop功能中，您可以使用ui.draggable访问原始拖动的项目，这样您就可以克隆它并将其附加到droppable元素中。

快速参考：

draggable - 类型：jQuery - 表示可拖动的jQuery对象   元件。

helper - 类型：jQuery - 表示帮助器的jQuery对象   被拖了。

文档：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/

jQuery UI：可拖动克隆并更改克隆

1 个答案: