jQuery可拖拽和droppable問題

我有一個問題相關的jQuery可拖拽和droppable。這是描述我想要做的事情。jQuery可拖拽和droppable問題

第一張：我有兩個div。一個是<div id="selected">，另一個是<div id="container">。「容器」有30個<li>，它們可以拖放到「選定」。這裏是代碼：

<div id="selected"> 
    <ul class="sortable-list"> 
    </ul> 
</div> 


<div id="container"> 
    <ul class="sortable-list"> 
      <li>1</li> 
      <li>2</li> 
      <li>....</li> 
      <li>29</li> 
      <li>30</li> 
    </ul> 
</div>

二：我希望從「容器」任何10 <li> s到「選擇」分區。如果有人試圖添加第11 <li>，那麼它不允許用戶。即第11個<li>即將插入到「選定」中，必須使用jQuery可撤銷選項還原。

即$("#container li").draggable({ revert: true }); 這裏是JavaScript代碼。

$(document).ready(function(){ 

    var total = 0; 
    $("#selected").droppable({ 
     drop: function() { 
       total = $("#selected li").length; 
       //alert(total); 
       if (total >= 10) { 
        $("#container li").draggable({ revert: true }); 
       } else { 
        //$("#container li").draggable({ revert: false }); 
       } 
      } 
    }); 
});

這工作正常。

三：但是，當我從拖動「選擇」到「容器」的<li>，在「選擇」分區將只有9 <li>秒。所以在這種情況下，稍後用戶應該能夠將另一個<li>添加到「容器」div的「selected」div中。但不幸的是，它不工作。所有<li>因爲if (total >= 10)條件，我嘗試拖放到「已選中」正在恢復。

任何人都可以幫我解決這個問題嗎？請...

來源

2010-11-27 gautamlakum

我會建議使用sortables，因爲它在某種程度上與div上的draggables和droppables相同。

這對排序並不是很困難，有一個接收事件。觀察這個事件並計數＃選中的li，如果有多於允許的，你可以取消當前的排序。

小提琴：http://jsfiddle.net/doktormolle/K7kDz/

來源

2010-11-27 16:54:54

嘿，這很好。非常棒。謝謝。 – gautamlakum 2010-11-29 05:49:53

第一個 - 我相信你應該讓UL droppable而不是DIV，否則你的LIs會在UL之外結束（你可以設計UL來填充整個DIV，所以它會依舊會觸發可放開一部分，當一個元素是它上面）

$("#selected ul.sortable-list").droppable({ 
    ...... 
});

第二和第三 - 你有你在哪裏設置恢復到假註釋掉ELSE部分是......只是這個例子或你忘記了那裏的評論嗎？（這是原因爲什麼它不工作）

} else { 
    // $("#container li").draggable({ revert: false }); 
}

也 - 你試過Firebug檢查你真的一旦你拖出來沒有在選定DIV那些LIS？

來源

2010-11-27 16:42:40

jQuery可拖拽和droppable問題

回答

相關問題