jQuery可拖动+；可放置：如何将放置的元素捕捉到放置在元素上

我将屏幕分为两个

DIV

s。在左侧

DIV

我有几个50x50像素

DIV

s，在右侧

DIV

我有一个由80x80

LI

s组成的空网格。左侧的

DIV

s是可拖动的，一旦放置在

LI

上，它们应该捕捉到该

LI

的中心

听起来很简单，对吧？我只是不知道该怎么做。我试图通过操纵拖放的

DIV

的

top

和

left

CSS属性来匹配它们被拖放到的

LI

的属性，但是

left

和

top

属性是相对于left

DIV

的

我怎样才能最好地使被放置的元素捕捉到它所放置的元素的中心？那一定很简单吧

编辑：我将jQueryUI1.7.2与jQuery1.3.2一起使用

编辑2:对于其他有此问题的人，我就是这样解决的：

我使用了Keith的解决方案，移除拖动的元素，并将其放置在可拖放插件的

drop

回调中的dropon元素中：

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}

功能gallerySnap（droppedOn，droppedElement）
{
$（droppedOn.html（“”+$（droppedElement.html（）+“”）；
$（droppedElement）.remove（）；
}

我不想让被删除的元素再次可拖动，但如果这样做，只需再次将可拖动绑定到它

对我来说，这种方法还解决了我在定位放置的元素（相对于左侧

DIV

）并在第二个

DIV

中滚动时遇到的问题。（元素将在页面上保持固定，现在它们会滚动）

我确实使用了捕捉选项，使其在拖动时看起来很好，所以感谢karim79的建议

---

我可能不会因此赢得任何令人敬畏的代码奖，所以如果你看到改进的空间，请分享

如果左侧的

div

s实际上位于右侧的

li

s中（您可以用Firebug确认），并且如果

li

s都位于

ul

中（它们应该是），请尝试以下一项或两项：

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}

---

我发现，当您进行拖动时，jQueryUI会添加一个内联命令，告诉您将其放置在何处。下面是我用来将其捕捉到位的代码示例

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});

---

我遇到了一个类似的问题——我通过手动从旧的父元素中删除拖动的元素并将其添加到DropleOn元素来解决这个问题

谢谢你的帖子——它帮了我正确的方向。我发现设置可拖动对象的position属性比处理HTML代码更简洁。这会将位置设置为可拖放对象的左上角，但也可以修改以使其居中

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}

---

我发现基思的方法对我有效。由于他的答案没有包含示例实现，我将发布我的：

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

或者更简洁地说：

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});

---

根据Barry的代码，如果我们想添加一个带有“x”按钮的选项，将元素再次从新父元素分离并重新连接到初始元素，该怎么办

我想这样的事，但似乎行不通。。 使某种变量保持初始状态

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }

某物肯定是错的，但我不知道你是否能理解这个概念。。。

---

只要能够将您删除的内容恢复到初始状态即可。

我使用FireBug进行了检查，但是删除的

DIV

s仍然是左侧

DIV

的一部分，它们似乎没有在HTML或DOM树中移动？嗯，我非常确定FireBug是基于javascript事件进行更新的，但您可能想检查一下。我知道Webdev工具栏也有一个“查看生成的源代码”选项。您是否使用jQueryUI来执行此操作？还是别的？谢谢，我在考虑这个解决方案。karim79的快速解决方案并不能完全解决我的问题，所以我将尝试一下。+1因为被接受的答案在很多情况下会破坏功能和布局。尤其是在可拖放区域外使用

还原

时。虽然这是正确的方法，

position（）

如果可拖放元素不是可拖放元素的同级元素，则无法完成此任务。在具有大型DOM的复杂网站上，定位将是错误的。在我看来，这应该是

draggable

&

droptable

的默认行为。

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }