JSQueryUI可以從一個ul排序到另一個

Question

我正在構建一個菜單規劃器使用JSQuery UI可拖動和排序。 請看看小提琴：

http://jsfiddle.net/mikepmtl/2fy9H/

<div class="day" id="Monday"> 
    <div>Monday</div> 
    <div>Breakfast</div> 
    <ul class="mealtime sortable draggable" id="mon_breakfast"></ul> 
    <div>Lunch</div> 
    <ul class="mealtime sortable draggable" id="mon_lunch"></ul> 
    <div>Snack</div> 
    <ul class="mealtime sortable draggable" id="mon_snack"></ul>  
</div> 

<div class="day" id="Tuesday"> 
    <div>Tuesday</div> 
    <div>Breakfast</div> 
    <div class="mealtime sortable draggable" id="tues_breakfast"></div> 
    <div>Lunch</div> 
    <div class="mealtime sortable draggable" id="tues_lunch"></div> 
    <div>Snack</div> 
    <div class="mealtime sortable draggable" id="tues_snack"></div> 
</div> 



//Drag and Drop 
$(function() { 

    $(".sortable").sortable({ 
      connectWith: "ul" , 
      cursor: "pointer", 
    }); 


    $(".draggable").draggable({ 
     helper: "clone", 
     cursor: "pointer", 
     connectToSortable: ".sortable" 
    }); 

    $('#trash').droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
      } 
     }); 
    }); 

}）;

如果您將食物項目中的項目添加到星期二下的菜單中，則可以在星期二重新拖放項目並將其放到星期一。

但是你不能在任何其他日子放棄它。 但是你在星期一的任何用餐時間都會工作。
我完全不解。

有人會知道爲什麼嗎？

Answer 1

在您的排序設置，您可以：

$(".sortable").sortable({ 
    connectWith: "ul" , 
    cursor: "pointer", 
}); 

通知的connectWith: "ul"。這意味着你可以下降到其他ul s。

這裏是週一的標記：

<div class="day" id="Monday"> 
    <div>Monday</div> 
    <div>Breakfast</div> 
    <ul class="mealtime sortable draggable" id="mon_breakfast"></ul> 
    <div>Lunch</div> 
    <ul class="mealtime sortable draggable" id="mon_lunch"></ul> 
    <div>Snack</div> 
    <ul class="mealtime sortable draggable" id="mon_snack"></ul>  
</div> 

通知的sortables是ul秒。

這裏是週二（隔日的）標記：

<div class="day" id="Tuesday"> 
    <div>Tuesday</div> 
    <div>Breakfast</div> 
    <div class="mealtime sortable draggable" id="tues_breakfast"></div> 
    <div>Lunch</div> 
    <div class="mealtime sortable draggable" id="tues_lunch"></div> 
    <div>Snack</div> 
    <div class="mealtime sortable draggable" id="tues_snack"></div> 
</div> 

的sortables是divs，不ul S，所以他們不會接受滴。

最簡單的辦法實際上可能是這樣的：

$(".sortable").sortable({ 
    connectWith: ".sortable" , 
    cursor: "pointer", 
}); 

http://jsfiddle.net/YTKMm/