2

我有按钮<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); }
        });

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

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

4

1 回答 1

1

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

快速参考：

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/

于 2013-09-14T15:18:22.810 回答