1
我正在使用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末。
下面是它的樣子，任何指向問題的指針都會受到歡迎。 
你可以把你的代碼，包括JS和CSS，如果有的話，在我們的工作小提琴？ – lucasnadalutti
沒有一個工作的例子，我們不可能幫你。提供的代碼不適用於它自己的代碼。 [這裏是一個演示bootply]（http://www.bootply.com/xQNWGFdsFd）。你可以分叉，或者創建你自己的。 – Ted