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

我用它来移动元素。问题是，当我向右拖动一个元素时，基本元素列表会被向左拖动

以下是呈现列表的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组项”）.draggable({
光标：“移动”，
光标：{顶部：-10，左侧：-10}，
助手：函数（事件）{
var coords=getcrossbrowselementcoords（事件）；
var id=event.currentTarget.getAttribute（'id'）；
//绘制一个临时元素
拖动=$.extend（{}，$scope.components[id]）；
拖动['id']=id+'-'+randomKey（）；
拖动['x']=coords.x；
拖动['y']=coords.y；
拖动['selected']=true；
$rootScope.$broadcast（Config.events.add_节点，拖动）；
返回$（“”）；
},
//按住项目时鼠标移动触发
拖动：函数（事件、元素）{
//TODO触发器添加节点事件
var coords=getcrossbrowselementcoords（事件）；
拖动['x']=coords.x；
拖动['y']=coords.y；
$rootScope.$broadcast（Config.events.update_节点，拖动）；
},
//释放鼠标时触发
停止：功能（事件、元素）{
var coords=getcrossbrowselementcoords（事件）；
//如果在滑块内，则删除临时节点
var-width=parseInt（$（“#边栏包装”）.css（'width'），10）；
if（坐标x<宽度）{
$rootScope.$broadcast（Config.events.remove_节点，拖动）；
}
拖动=空；
}
});

渲染的克隆将附加到列表组的末尾

下面是它的样子，任何指向这个问题的指针都是受欢迎的。

---

可能与光标位置有关？我认为当您第一次开始拖动时，Jquery UI会将helper元素移动到Cursor At中的指定位置，产生向左跳跃的错觉？

我通过使用draggable的

appendTo

属性将元素附加到#result parent，然后控制它在

拖动
函数中的隐藏或显示时间。
您能否将您的代码（包括JS和CSS，如果有的话）放在我们的工作小提琴中？如果没有工作示例，我们不可能帮到您。提供的代码本身无法工作。您可以分叉，也可以创建自己的。在删除
光标时，我无法控制拖动元素到鼠标指针的位置。