1

我正在使用可拖动和可排序的 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();
            }
        });
    });

});

例如，如果您将食品项目中的项目添加到周二下的菜单中，您可以在周二重新拖动一个项目并将其拖放到周一。

但是您不能在其他任何一天放下它。但是你周一的任何用餐时间都可以。
我完全不解。

有人会知道为什么吗？

4

1 回答 1

0

在您的可排序设置中，您有：

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

注意connectWith: "ul". 这意味着您可以放到其他uls 上。

这是星期一的标记：

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

请注意，可排序对象是uls。

这是星期二（和每隔一天）的标记：

<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，而不是uls，所以他们不会接受 drop。

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

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

http://jsfiddle.net/YTKMm/

于 2013-07-26T19:36:53.743 回答