Question

我试图找出为什么jquery ui draggable在droppable上发布时会跳转！

它基本上跳到右边，无论页面在哪里发布！

这是一个解释问题的方法：https://jsfiddle.net/2wwa3yaw/1/

我认为是因为我给了div #droppable一个相对position:relative;的位置，但我需要这样做。

有什么方法可以解决这个问题吗？

任何建议都将不胜感激。

Answer 1

我的意思是这样的：

https://jsfiddle.net/Twisty/szmrb146/

当您追加x时，您可以通过CSS设置top和left。

<强> HTML

<div align="center" style="width:100%; padding-top:10px;">
  <div id="dragme" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;">
    <P> Drag me </P>
  </div>
  <div align="center" id="droppable" style=" position:relative; width: 250px; height:550px; border: 2px dashed red;">
    <P> </P>
  </div>
</div>

<强> JQuery的

$("#dragme").draggable({
  helper: 'clone',
  cursor: 'move',
  tolerance: 'fit'
});

var x = null;
$("#droppable").droppable({
  drop: function(e, ui) {
    var parent = $("#droppable");
    var x = ui.helper.clone();
    var leftAdj = (ui.position.left - parent.offset().left);
    var topAdj = (ui.position.top - parent.offset().top);
    x.css({
      left: leftAdj,
      top: topAdj
    });
    x.draggable({
      helper: 'original',
      containment: '#droppable',
      tolerance: 'fit'
    });
    x.find('.ui-resizable-handle').remove();
    x.resizable();
    x.appendTo('#droppable');
    ui.helper.remove();
  }
});

<强>更新

发现了一个小错误，我们只想在第一次删除对象时调整这些错误。所以我添加了一个类和一个条件：

https://jsfiddle.net/Twisty/szmrb146/1/

添加课程：

<div id="dragme" class="outside" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;">
    <P> Drag me </P>
  </div>

条件：

    if (x.hasClass("outside")) {
      x.css({
        left: leftAdj,
        top: topAdj
      });
      x.removeClass("outside");
    }

jquery draggable在页面上发布时跳转？

1 个答案: