javascript - JSQueryUI 可从一个 ul 排序到另一个 ul

Question

我正在使用 JSQuery UI 可拖动和可排序构建菜单规划器。请看一下 fiddle :

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 上。

这是周一的加价:

<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>

请注意，可排序项是 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>

可排序的是 div，而不是 ul，因此它们不会接受放置。

最简单的解决方案实际上可能是这样的:

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

http://jsfiddle.net/YTKMm/