向右拖动元素会导致原始元素向左移动

Question

我正在使用JQuery-UI draggable 来移动一个元素。问题是当我将一个元素拖到右侧时，底层的元素列表会被拖到左侧！

这是渲染列表的 DOM：

<div id="result" class="list-group">
 <div class="list-group" data-reactid=".0">
  <a id="sink" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1etg">
   <h4 class="list-group-item-heading" data-reactid=".0.$1etg.$14dd">
    <i class="fa fa-star" data-reactid=".0.$1etg.$14dd.$1crq">Spout</i>
   </h4>
   <p class="list-group-item-text" name="Spout" data-reactid=".0.$1etg.$24yv">Data source</p>
  </a>
  <a id="forex" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1mfb">
   <h4 class="list-group-item-heading" data-reactid=".0.$1mfb.$1epm">
    <i class="fa fa-dollar" data-reactid=".0.$1mfb.$1epm.$1b42">Composable type</i>
   </h4>
   <p class="list-group-item-text" name="Composable type" data-reactid=".0.$1mfb.$210d">Composable type</p>
  </a>
  <a id="read_portfolio" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$k4i">
   <h4 class="list-group-item-heading" data-reactid=".0.$k4i.$a1i">
    <i class="fa fa-search" data-reactid=".0.$k4i.$a1i.$mqj">Read portfolio</i>
   </h4>
   <p class="list-group-item-text" name="Read portfolio" data-reactid=".0.$k4i.$1pqw">Read a portfolio</p>
  </a>
  <a id="constituents_valuation" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$11ub">
   <h4 class="list-group-item-heading" data-reactid=".0.$11ub.$1r31">
    <i class="fa fa-cogs" data-reactid=".0.$11ub.$1r31.$1omt">Constituents valuation</i>
   </h4>
   <p class="list-group-item-text" name="Constituents valuation" data-reactid=".0.$11ub.$bca">Compute the valuation of constituents</p>
  </a>
  <a id="get_constituents" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$n2d">
   <h4 class="list-group-item-heading" data-reactid=".0.$n2d.$jho">
    <i class="fa fa-eye" data-reactid=".0.$n2d.$jho.$nn1">Portfolio constituents</i>
   </h4>
   <p class="list-group-item-text" name="Portfolio constituents" data-reactid=".0.$n2d.$1870">Get the constituents of a portfolio</p>
  </a>
 </div>
</div>

插件的使用方法如下：

  $(".list-group-item").draggable({
    cursor: "move",
    cursorAt: { top: -10, left: -10 },
    helper: function (event) {
      var coords = getCrossBrowserElementCoords(event);
      var id = event.currentTarget.getAttribute('id');
      // draw a temporary element
      dragged = $.extend({}, $scope.components[id]);
      dragged['id'] = id + '-' + randomKey();
      dragged['x'] = coords.x;
      dragged['y'] = coords.y;
      dragged['selected'] = true;          
      $rootScope.$broadcast(Config.events.add_node, dragged);

      return $("<div class='fa fa-" + dragged.icon + "' style='font-size:xx-large'></div>");
    },
    // Triggerent on mouse move while holding the item
    drag: function(event, element) {
      //TODO trigger add_node event
      var coords = getCrossBrowserElementCoords(event);
      dragged['x'] = coords.x;
      dragged['y'] = coords.y;
      $rootScope.$broadcast(Config.events.update_node, dragged);
    },
    // Triggered once a the mouse is released
    stop: function(event, element) {
      var coords = getCrossBrowserElementCoords(event);
      // if within the slider then remove the temporary node
      var width = parseInt($("#sidebar-wrapper").css('width'), 10);
      if(coords.x < width) {
        $rootScope.$broadcast(Config.events.remove_node, dragged);
      }
      dragged = null;
    }
  });

渲染的克隆被附加到list-group 的末尾。

以下是它的外观，欢迎任何指向该问题的指针。

Answer 1

也许它与光标位置有关？我想当你第一次开始拖动时，Jquery UI 会将辅助元素移动到 Cursor At 中的指定位置，造成它向左跳跃的错觉？

Answer 2

我通过使用可拖动元素的appendTo 属性将元素附加到#result 父元素，然后在drag 函数中控制它何时隐藏或显示，从而解决了这个问题。