【问题标题】:jQuery droppable absolute positioning and redraggable at the same timejQuery droppable 绝对定位和同时可重新拖动
【发布时间】:2017-02-11 19:11:48
【问题描述】:

因为这个,我感到很愚蠢,但我真的想不通。请参阅我的 Draggables 有两个要求,我想从可滚动的侧边菜单移动到另一个 div:

  • 我希望将它们放置在我放置它们的位置
  • 我希望它们一旦被放下就可以再次拖动

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

当我输入这个时,重新拖动效果很好,但是拖动的 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());
        }
    });

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

【问题讨论】:

    标签: jquery jquery-ui draggable positioning droppable


    【解决方案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'}));
    
    
            }
        });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-06-22
      • 1970-01-01
      • 2016-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-15
      • 2012-05-26
      相关资源
      最近更新 更多