jQuery的可拖动+可弃：如何下降元素捕捉到下降接元件(jQuery draggable + dr

我有我的屏幕分成两个DIV秒。在左侧DIV我有几个50×50像素DIV秒，在右侧DIV我有由80×80的空格LI秒。该DIV在你的左边是可拖动，一旦投下的LI ，他们应该捕捉到该中心LI 。

听起来很简单，不是吗？我只是不知道如何完成这件事。我试图通过操纵下降DIV的top和left的CSS属性以匹配的LI他们投进，但left和top属性是相对于左侧DIV 。

我怎样才能最好有下降元素捕捉到它投进元素的中心？那得是简单的，对不对？

编辑：我使用jQuery UI 1.7.2用jQuery 1.3.2。

编辑2：不管是谁都有这个问题，这是我的固定它：

我用删除拖动的元素，并把它放在了下降，对元素内的基思的解决方案drop可投放插件的回调：

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

我不被丢弃的元素再次成为可拖动的，但如果这样做，只要绑定可拖动一遍。

对我来说，这种方法也解决了定位下跌元素（这是相对于离开的时候，我有问题DIV ）和第二内侧滚动DIV 。（元素将保持固定页面上，现在他们沿滚动）。

我没有与捕捉选项玩，使其看起来很好，同时拖动，所以感谢karim79这一建议。

我可能不会赢得任何真棒代码奖品这一点，所以如果你看到改进的空间，欢迎交流！

Answer 1:

我有一个类似的问题 - 我工作围绕它通过手动从它的老上级删除拖动的元素并将其添加到被丢弃的元素。

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:

感谢您的文章 - 它帮助我在正确的方向。我觉得有点清洁器设置可拖动对象，而不是用HTML代码搞乱的位置属性。这台位置到的左上角droppable对象，但你可以修改把它居中为好。

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

Answer 4:

我发现，当你这样做的阻力，jQuery用户界面增加了一个内联告诉你，你把它丢。下面是我用它卡入到位的代码示例

$('.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左侧5事实上是在li右侧（你可以用Firebug的确认）S，如果li s为所有在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);
 }

某事是肯定错了，但我不知道如果你能得到的概念...只是能够扭转无论你已经下降到初始状态。

文章来源: jQuery draggable + droppable: how to snap dropped element to dropped-on element