我正在使用自定义辅助方法,该方法返回 <div>
,在删除 <div>
时它添加了不止一次。请看代码以便更好地理解
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
}
});
$(".droppable").sortable({
placeholder: "ui-state-highlight"
}).disableSelection();
$(".droppable").droppable({
drop: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
});
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
这是 HTML
<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>
<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="droppable">Drop Target</div>
完整代码可见here .
我发现我们是否删除 connectToSortable
属性在draggable中它会工作得很好。但我需要该属性,但我不明白它在 connectToSortable
时出现这种行为的原因。已设置。
最佳答案
您的 drop()
被调用两次,因为 connectToSortable
也触发了 drop()
。
(Sortable 已经是 droppable)
我已经编辑了您的代码,以获得与可排序的receive
函数相同的结果
<强> DEMO
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
},
stop: function(){
$(this).css({opacity:1});
},
start: function(){
$(this).css({opacity:0});
},
});
$(".droppable").sortable({
placeholder: "ui-state-highlight",
receive: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
}).disableSelection();
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
关于javascript - 在删除一个组件时,它会在可删除组件上多次添加它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24757992/