为什么这段代码不允许我将助手放到可放置区域？
$(".product").draggable({
revert: 'invalid',cursorAt: { top: -12,left: -20 },helper: function(event) {
return $('<div class="product_helper"></div>');
}
});
$(".droppable").droppable({
accept: '.product_helper',drop: function(event,ui) {
$(this).append( ui.helper );
}
});
甚至可以将帮助器放在一个可放置的支架上吗？
解决方法
完全可以删除帮助程序的克隆,但是不能删除帮助程序本身(如示例中所示).
这是一个jsfiddle演示丢弃一个克隆的帮助器：
http://jsfiddle.net/jKabn/1/
这是相关的代码：
$(".product").draggable({
revert: 'invalid',helper: function(event) {
return $('<div class="helper">Helper</div>');
}
});
$(".droppable").droppable({
drop: function(event,ui) {
//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);
}
});
在jquery中执行drop之后删除帮助程序.为了保持它,你需要删除可拖动的特定css和定位以及克隆元素.在jsfiddle中还有一个关于删除“draggable”元素的演示(并不是因为它与你的问题特别相关,我只是为自己添加它.)
希望有所帮助