jQuery droppable绝对定位和redraggable同时

时间:2017-02-11 19:11:49

标签: jquery jquery-ui draggable positioning droppable

我因为这个而感到非常愚蠢,但我真的无法弄明白。看到我对我的Draggables有两个要求,我想从可滚动的侧面菜单移动到另一个div:

  • 我希望他们被丢弃在我放弃的位置
  • 我希望他们一旦被放弃就可以再次拖拽

现在愚蠢的部分是,我设法实现了这两个目标,但不知何故不能让它们同时工作。

当我输入这个时,redragging工作得非常好,但拖动的div会捕捉到左上角:

  jQuery('#droppable').droppable({
    accept: '.drag',
    drop: function(e, ui) {
        if (!ui.draggable.hasClass("dropped"))
            jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
        }
    });

但是当我添加代码来定位它时,它确实很好但是一旦它被删除,它就会永远掉线(原来也不能再被拖动)

 jQuery('#droppable').droppable({
    accept: '.drag',
    drop: function(e, ui) {
        if (!ui.draggable.hasClass("dropped"))
            var parentOffset = jQuery('#droppable').offset();
            var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
            dropped.css('left', (ui.position.left  - parentOffset.left) +'px');
            dropped.css('top', (ui.position.top - parentOffset.top) +'px');
       jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
        }
    });

我有一种感觉,我做了一些非常基本的错误:) 谁能帮我? 提前谢谢!

1 个答案:

答案 0 :(得分:1)

好的,明白了。如果其他人有这个问题,这对我来说是这样的:

jQuery('#droppable').droppable({
    accept: '.drag',
    drop: function(e, ui) {
        var parentOffset = jQuery('#droppable').offset();
        var off = $(ui.draggable).clone().offset();


        if (!ui.draggable.hasClass("dropped"))
            jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable().css({'position': 'absolute', 'left': (ui.position.left - parentOffset.left) + 'px', 'top': (ui.position.top - parentOffset.top) + 'px'}));


        }
    });