Question

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

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

这是周二（以及其他每一天）的标记：

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

可排序的是divs，而不是ul，因此他们不会接受这些丢弃。

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

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

http://jsfiddle.net/YTKMm/

JSQueryUI可以从一个ul到另一个进行排序

1 个答案: