jquery 可排序 droponempty 修复

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 后应用 connect-with 时，我应该如何确保即使是空列表？

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结构，还要确保将元素拖动到空的顶部div。仅仅因为您正在更改背景颜色和最小高度并不意味着实际可排序的高度正在改变。因此，看起来您可以将项目放置在开放区域的任何位置，但实际上您不能，除非您一开始就定义了可排序的高度。

Answer 2

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

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

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