jQuery UI：放入相对定位的容器 [英] jQuery UI: Drop into relatively positioned container

问题描述

我使用jQuery UI将对象的克隆拖放到可拖放空间。但是，我需要可droppable空间有 position：relative 属性，因为可拖放空间滚动，我想要删除的元素与它滚动。但是，当我删除克隆它跳下来，而不是停留在我放下的地方。

I am using jQuery UI to drag a clone of an object onto a droppable space. However, I need the droppable space to have the position: relative property because the droppable space scrolls and I want the dropped elements to scroll with it. However, when I drop the clone it jumps down and to the right instead of staying where I dropped it. How would I combat this?

这里是一个小提琴，演示了我的问题： http://jsfiddle.net/nEN7h/42/

Here is a fiddle that demonstrates my problem: http://jsfiddle.net/nEN7h/42/

编辑：根据我的评论更新。

Updated based on my comment.

推荐答案

试试这个

$(".canvas").droppable({
    accept: '.to_drag',
    drop: function(event, ui) {
        var clone = $(ui.helper).clone();
        var parent = $('.canvas.ui-droppable');

        $(this).append(clone);
        var leftAdjust = clone.position().left - parent.offset().left;
        var topAdjust = clone.position().top - parent.offset().top;
        clone.css({left: leftAdjust, top: topAdjust});

    }
});

基本上这个想法是当你把可放置的内容放在一个相对的div。在droppable内获得父的偏移位置不必要地添加到它..所以你只需删除额外的偏移在下拉回调函数。

basically the idea is that when you enclose the droppable inside a div that is relative.. any element enclosed within droppable gets the offset position of the parent unnecessarily added to it.. so you simply remove the extra offset at the drop call back function.

请注意差异 .offset（）和。position（） ..这是理解上述代码的关键。

Please pay close attention to difference between .offset() and .position().. that is key to understanding the above code.

>
我尝试使用jsfiddle ..但jsfiddle fiddles有点定位..尝试它在您的浏览器，它应该工作

note: I tried using jsfiddle.. but jsfiddle fiddles a bit with the positioning.. try it on your browser alone and it should work

这篇关于jQuery UI：放入相对定位的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！