向右拖动元素会使原始元素向左移动

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

也许它与Cursor At有关？我想当你第一次开始拖动时，Jquery UI会将辅助元素移动到Cursor At中的指定位置，从而产生向左跳的幻觉？

Answer 2

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