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

jQuery draggable + droppable: how to snap dropped element to dropped-on element

提问by 10goto10

I have my screen divided into two DIVs. In the left DIVI have a few 50x50 pixel DIVs, in the right DIVI have an empty grid made of 80x80 LIs. The DIVs on the left are draggable, and once dropped on a LI, they should snap to center of that LI.

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

Sounds simple, right? I just don't know how to get this done. I tried by manipulating the dropped DIV's topand leftCSS properties to match those of the LIthey're dropped into, but the leftand topproperties are relative to the left DIV.

听起来很简单，对吧？我只是不知道如何完成这项工作。我尝试通过操纵 dropDIV的top和leftCSS 属性来匹配LI它们被放入的属性，但left和top属性是相对于 left 的DIV。

How can I best have the dropped element snap to the center of the element it's dropped into? That's gotta be simple, right?

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

Edit:I'm using jQuery UI 1.7.2 with jQuery 1.3.2.

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

Edit 2:For whoever else has this problem, this is how I fixed it:

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

I used Keith's solution of removing the dragged element and placing it inside the dropped-on element in the dropcallback of the droppable plugin:

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

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

I don't the dropped element to be draggable again, but if you do, just bind draggable to it again.

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

For me this method also solved the problem I had when positioning the dropped elements (which would be relative to the left DIV) and scrolling inside the second DIV. (Elements would remain fixed on page, now they scroll along).

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

I did play with the snap options to make it look good while dragging, so thanks to karim79 for that suggestion.

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

I probably won't win any Awesome Code prizes with this, so if you see room for improvement, please share!

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

采纳答案by Keith

I had a similar problem - I worked around it by manually removing the dragged element from its old parent and adding it to the dropped on element.

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

回答by Barry Pitman

I found that Keith's method worked for me. Since his answer doesn't include an example implementation, I'll post mine:

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

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

or, slightly more concisely:

或者，稍微简洁一点：

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

回答by glackk

Thanks for your post - it helped me in the right direction. I find it a bit cleaner to set the position properties of the draggable object instead of messing with the HTML code. This sets the position to the top left corner of the droppableobject, but you can modify to have it centered as well.

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

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

回答by diyism

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

回答by AutomatedTester

I found that when you do the drag, jQuery UI adds an inline to tell you where you dropped it. Below is a sample of the code that I used to snap it into place

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

回答by nikolas

based on Barry's code, what if we d like to add an option with an "x" button the element to be detached again from the new parent and be reattached to the initial?

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

i thought sth like this, but didn't seem to work.. to make some sort of a variable that hold initial state

我是这样想的，但似乎没有用..制作某种保持初始状态的变量

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

sth is definately wrong but i don't know if you can get the concept... just being able to reverse whatever you have dropped to their initial state.

某事肯定是错误的，但我不知道你是否能理解这个概念......只是能够扭转你已经下降到初始状态的任何东西。

回答by Anthony

If the divs on the left are actually in the lis on the right (which you can confirm with Firebug), and if the lis are all in a ul(as they should be), try one or both of the following:

如果div左边的lis实际上在右边的s 中（您可以用 Firebug 确认），并且如果lis 都在 a 中ul（它们应该是），请尝试以下一种或两种方法：

ul#right_div {
  text-align: center;
}

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