我将屏幕分为两个DIVs。在左侧DIV我有几个50×50像素DIVs,在右侧DIV我有一个由80×80LIs组成的空网格。左侧的DIVs是可拖动的,一旦放置在LI上,它们应该捕捉到该LI的中心
听起来很简单,对吧?我只是不知道该怎么做。我试图通过操纵拖放的DIV的top和leftCSS属性来匹配它们被拖放到的LI的属性,但是left和top属性是相对于leftDIV的
我怎样才能最好地使被放置的元素捕捉到它所放置的元素的中心?那一定很简单吧
编辑:我将jQueryUI1.7.2与jQuery1.3.2一起使用
编辑2:对于其他有此问题的人,我就是这样解决的:
我使用了Keith的解决方案,移除拖动的元素,并将其放置在可拖放插件的drop回调中的dropon元素中:
函数gallerySnap(droppedOn,droppedElement)
{
$(droppedOn.html(’<;div class=“drop_styles”>;’+$(droppedElement.html()+’<;/div>;’);
$(droppedElement).remove();
}
我不想让被删除的元素再次可拖动,但如果这样做,只需再次将可拖动绑定到它
对我来说,这种方法还解决了我在定位放置的元素(相对于左侧DIV)并在第二个DIV中滚动时遇到的问题。(元素将在页面上保持固定,现在它们会滚动)
我确实使用了捕捉选项,使其在拖动时看起来很好,所以感谢karim79的建议
我可能不会因此赢得任何令人敬畏的代码奖,所以如果你看到改进的空间,请分享
我发现基思的方法对我有效。由于他的答案没有包含示例实现,我将发布我的:
$('.dropTarget')。可拖放({
下拉:功能(ev、ui){
var DROPED=ui.draggable;
var droppedOn=$(本);
$(已删除).detach().css({top:0,left:0}).appendTo(droppedOn);
}
});
或者更简洁地说:
$('.dropTarget')。可拖放({
下拉:功能(ev、ui){
$(ui.draggable).detach().css({top:0,left:0}).appendTo(this);
}
});