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

Question

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

听起来很简单，对吧？ 我只是不知道如何完成这件事。 我尝试通过操作删除的 DIV 的 top 和 left CSS 属性来匹配 LI 它们的属性重新放入，但 left 和 top 属性是相对于左侧 DIV 的。

如何才能最好地将放置的元素捕捉到它所放置的元素的中心？ 这一定很简单，对吧？

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

编辑2：对于其他遇到此问题的人，这就是我修复它的方法：

我使用 Keith 的解决方案，删除拖动的元素并将其放置在 drop droppable 插件的回调：

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

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

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

我确实使用了对齐选项，使其在拖动时看起来不错，所以感谢 karim79 的建议。

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

感谢您的帖子 - 它帮助我朝正确的方向发展。 我发现设置可拖动对象的位置属性比弄乱 HTML 代码要干净一些。 这会将位置设置为可放置对象的左上角，但您也可以修改以使其居中。

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

Answer 5

我发现当您进行拖动时，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');
});

Answer 6

如果左侧的 div 实际上位于右侧的 li 中（您可以使用 Firebug 确认），并且如果 li全部位于 ul 中（它们应该是这样），请尝试以下一项或两项操作：

ul#right_div {
  text-align: center;
}

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

Answer 7

根据巴里的代码，如果我们想添加一个带有“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);
 }

肯定是错误的，但我不知道你是否能理解这个概念......
只是能够将你已经掉落的任何东西恢复到初始状态。