我有按钮 <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 标签或结构的按钮。这些按钮仅显示标签的名称,当您拖动它时,您会看到要删除的真实标签。
最佳答案
在您的 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();
}
});
});
关于jQuery 用户界面 : Draggable clone and change clone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18803149/