jQuery的排序當dropOnEmpty修復

我與jQuery的排序（jQuery UI的）jQuery的排序當dropOnEmpty修復

根據默認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到＃選擇器2（裏面是空的）我第一次拖 - 沒有滷味gging會出現，但是如果我將其拖回到源代碼中，則會收到日誌記錄，並且比拖回目標列時有效？

空選擇器甚至有ui-sortable類，但它不連接！

在初始化connectWith之後，我應該如何確保在應用connect-with時單獨列出空列表？

來源

2011-09-22 jordan.baucke

是否在原始代碼的最後一行缺少'''？ – Jack

這只是'僞代碼' –

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的頂部。僅僅因爲你正在改變背景顏色和最小高度並不意味着實際可分類的高度正在改變。所以它可能看起來像你可以將物品放置在開放區域的任何地方，實際上你實際上不能，除非你在開始時定義可排序的高度。

來源

2011-09-22 21:19:55 Jack

好主意@Jack讓我看看我是否可以在那裏重新創建問題（-8 –

**對不起**它是在這裏：http://jsfiddle.net/jordanbaucke/MMyP3/3/：嘗試拖動將元素放入空白位置而不觸及非空的可排序列表，然後放下，沒有任何反應，它恢復到原來的列表...現在：嘗試拖拽非空列表，然後回到空列表並返回下降 - 神奇地它的工作！現在我看到， –

，一些最低高度必須已經應用''.sortable'附加。在空白元素中添加一個「最小高度」類肯定會給我一個很好的目標區域。仍然不如視覺吸引力，讓他們縮小和擴大懸停 - 但我想我可以在那附近工作。 –

@傑克的解釋，爲什麼你不能掉入空的排序是正確的。在任何回調已經運行之前，可以在開始拖拽開始時排序緩存它的排序位置。因此，如果您更改回調中拖放區域的高度，則會忽略它們，因爲它仍使用緩存值。

如果在調整回調高度後立即使用Sortable的'refreshPositions' method，那麼可排序的應該具有準確的定位信息，以便您可以成功放入目標區域而無需觸摸非空的可排序列表。

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

來源

2012-07-06 19:43:37 gehsekky

jQuery的排序當dropOnEmpty修復

回答

相關問題