jQuery draggable + droppable：如何将放置的元素捕捉到放置的元素答案

【问题标题】：jQuery draggable + droppable: how to snap dropped element to dropped-on elementjQuery draggable + droppable：如何将放置的元素捕捉到放置的元素
【发布时间】：2010-11-18 06:53:19
【问题描述】：

我的屏幕分为两个DIVs。在左边 DIV 我有几个 50x50 像素 DIVs，在右边 DIV 我有一个由 80x80 LIs 组成的空网格。左侧的DIVs 是可拖动的，一旦放在LI 上，它们应该会吸附到LI 的中心。

听起来很简单，对吧？我只是不知道如何完成这件事。我尝试通过操纵丢弃的DIV 的top 和left CSS 属性来匹配它们被放入的LI，但是left 和top 属性是相对于左边的@ 987654335@.

我怎样才能最好地让被放置的元素捕捉到它被放置到的元素的中心？应该很简单吧？

编辑：我正在使用 jQuery UI 1.7.2 和 jQuery 1.3.2。

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

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

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

我不会再次拖动放置的元素，但如果你这样做，只需将可拖动的元素再次绑定到它。

对我来说，这种方法还解决了我在放置放置的元素（相对于左侧DIV）和在第二个DIV 内滚动时遇到的问题。（元素将保持固定在页面上，现在它们会滚动）。

我确实使用了捕捉选项以使其在拖动时看起来不错，因此感谢 karim79 的建议。

我可能不会因此赢得任何很棒的代码奖，所以如果您看到改进的空间，请分享！

【问题讨论】：

标签： jquery draggable droppable

【解决方案1】：

我发现 Keith 的方法对我有用。由于他的回答不包括示例实现，我将发布我的：

$('.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);
    }
});

【讨论】：

IMO 这应该是draggable & droppable 的默认行为。

【解决方案2】：

我遇到了类似的问题 - 我通过手动从其旧父级中删除拖动的元素并将其添加到放置的元素来解决它。

【讨论】：

谢谢，我正在考虑这个解决方案。 karim79 的快速解决方案并不能完全解决我的问题，所以我会尝试一下。

【解决方案3】：

感谢您的帖子 - 它帮助我朝着正确的方向前进。我发现设置可拖动对象的位置属性而不是弄乱 HTML 代码更简洁。这会将位置设置为droppable 对象的左上角，但您也可以修改使其居中。

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

【讨论】：

+1 因为接受的答案在很多情况下会破坏功能和布局。特别是如果在可放置区域之外使用revert。虽然这是正确的方法，但如果可放置元素不是可拖动元素的兄弟，position() 将无法完成这项工作。在具有巨大 DOM 的复杂网站上，定位会出错。

【解决方案4】：

我发现当你进行拖动时，jQuery UI 会添加一个内联来告诉你拖放的位置。下面是我用来将其固定到位的代码示例

$('.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');
});

【讨论】：

【解决方案5】：

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true});
$('.drop').droppable({drop:function(ev, ui)
                           {$(ui.draggable).appendTo($(this))
                                           .css({position:'static', left:'0px', top:'0px'})
                                           .draggable('option', 'disabled', false)
                                           .css({position:'relative'});
                           }
                     }
                    );

【讨论】：

【解决方案6】：

如果左侧的 divs 实际上在右侧的 lis 中（您可以使用 Firebug 确认），并且如果 lis 都在 ul 中（因为它们应该be)，请尝试以下一种或两种方法：

ul#right_div {
  text-align: center;
}

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

【讨论】：

我用 FireBug 查了一下，但是被丢弃的DIVs 仍然是左边DIV 的一部分，它们似乎没有在 HTML 或 DOM 树中移动？
嗯，我很确定 Firebug 会根据 javascript 事件进行更新，但您可能想检查一下。我知道 Web Dev 工具栏也有一个“查看生成的源代码”选项。您是否使用 JQuery UI 来执行此操作？还是别的什么？

【解决方案7】：

基于 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);
 }

这绝对是错误的，但我不知道你是否能理解这个概念...... 只是能够扭转你已经下降到他们的初始状态。

【讨论】：