jqueryui - 如何添加到使用float的sortable:left?

时间:2014-01-13 16:24:13

标签: jquery jquery-ui

我有一个左列浮动元素的2列容器。我想通过另一个元素的克隆拖到可排序的内部来为其添加任意多个新元素。

我遇到的问题是,当我拖动新盒子到可排序的盒子时,我会得到很多闪烁,而且很难获得盒子进入正确的位置。我做错了什么?

Here是一个展示问题的例子

HTML:

<div id='box_container'>
    <div class='box' style='background: red;'></div>
    <div class='box' style='background: green;'></div>
    <div class='box' style='background: blue;'></div>
    <div style='clear: both;'></div>
</div>

<div id='new_box_container'>
    <div class='box'></div>
</div>

JS:

$('#box_container').sortable();
$('#new_box_container .box').draggable({
    items: '.box',
    helper: 'clone',
    appendTo: '#box_container',
    connectToSortable: '#box_container'
});

1 个答案:

答案 0 :(得分:0)

尝试使用秒connectWith而不是sortable的{​​{1}}选项。 jQuery似乎表现得更好:

draggable

请注意,我没有给第一个$('#box_container').sortable(); $('#new_box_container').sortable({ connectWith:'#box_container' }) sortable,因此它只允许您单向拖动。我相信那是你的意图。

你还需要重做它的克隆方面,但这并没有给我任何闪烁。

示例:http://jsfiddle.net/xu5vG/