Question

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

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

我怎样才能最好地将掉落的元素捕捉到它所放入的元素的中心？这一定很简单，对吧？

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

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

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

drop

我不会将被删除的元素再次拖动，但如果你这样做，只需将draggable再绑定到它。

对我来说，这个方法也解决了我在定位掉落的元素（相对于左function gallerySnap(droppedOn, droppedElement) { $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' ); $(droppedElement).remove(); }）和滚动第二个DIV时遇到的问题。（元素将保持固定在页面上，现在它们会滚动）。

我确实使用了快照选项来让它在拖动时看起来很好看，所以感谢karim79的建议。

我可能不会凭借这一点赢得任何令人敬畏的代码奖品，所以如果你看到改进的空间，请分享！

Answer 1

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

$('.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 2

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

Answer 3

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

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

Answer 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');
});

Answer 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'});
                           }
                     }
                    );

Answer 6

如果左边的div实际位于右边的li中（您可以使用Firebug确认），并且li都在ul中{1}}（应该如此），请尝试以下一项或两项：

ul#right_div {
  text-align: center;
}

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

Answer 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);
 }

明确错误但我不知道你是否能得到这个概念...... 只是能够扭转你已经下降到初始状态的任何东西。

jQuery draggable + droppable：如何将drop元素捕捉到drop-on元素

7 个答案: