Question

我正在使用jQuery的可排序（jQuery ui）

默认dropOnEmpty = true，以及加速我在后应用connectwith 我将.sortable()应用于我的选择器如下：

<script type="text/javascript"> $('#selector1').sortable({ over: function(ev,ui){ console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id')); } )}; $('#selector2').sortable({ over: function(ev,ui){ console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id')); } )}; $('.ui-sortable').sortable('option', connectWith', '.ui-sortable'); </script>

我已经演示了我的日志记录以试图弄清楚发生了什么 - 想象一下我第一次从＃selector1拖到＃selector2（它是空的） - 没有记录，但是如果我拖动回到源代码中，我得到了日志记录，而当我拖回到目标列时，它有效吗？

空选择器甚至有ui-sortable类，但它没有连接！

在分别初始化connectWith之后，我应该如何确保在应用连接时使用空列表？

Answer 1

http://jsfiddle.net/MMyP3/5/

编辑：按要求提供代码：

HTML：

<div id="container" style="display:inline">
<div id="column1" class="column">

<div class="element">Element 1</div>
<div class="element">Element 4</div>

</div>

<div id="column2" class="column">

<div class="element">Element 2</div>
<div class="element">Element 3</div>

</div>

<div id="column3" class="column">

</div>

CSS：

.column{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px;
    margin: 10px;
    min-width:100px;
    padding: 5px;  
    float:left;
    width:100px;
}

.element{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px; 
}

使用Javascript：

$('.column').sortable({
    var $this = $(this);
    activate: function(en, ui) {
        $this.css('min-height', '100px');
        $this.css('background-color', '#666');
    },
    deactivate: function(en, ui) {
        $this.css('min-height', '0px');
        $this.css('background-color', '#FFF');
    },
    placeholder: 'ui-state-highlight'
});

$('.column').sortable('option', 'connectWith', '.column');

修改：我更新了我的链接，我认为主要问题是我调整过的html结构，同时确保将元素拖到空divs的顶部。仅仅因为您正在更改背景颜色和最小高度并不意味着实际可排序的高度正在发生变化。因此，看起来您可以将物品放置在开放区域的任何位置，实际上您实际上不能，除非您在开始时为可分类物定义高度。

Answer 2

@ Jack关于你为什么不能放入空的sortables的解释是正确的。可排序在任何回调运行之前，在拖动开始时缓存其可排序的位置。因此，如果您更改回调中放置区域的高度，那么它们将被忽略，因为它仍然使用缓存值。

如果您在回调中调整高度后使用可排序的'refreshPositions' method，则可排序现在应具有准确的定位信息，以便您可以成功地放入目标区域而无需触摸非空的可排序列表。

$('#sortable').sortable({
    start: function (e, ui) {
        $('.sortable_drop_zone').css('min-height', '50px');
        $('#sortable').sortable('refreshPositions');
    }
});

jquery可排序droponempty修复

2 个答案: