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"ください。つまり、他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>

sortable がuls であることに注意してください。

火曜日 (および 1 日おき) のマークアップは次のとおりです。

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

sortable はdivsではなくulであるため、ドロップを受け入れません。

最も簡単な解決策は、実際には次のとおりです。

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

http://jsfiddle.net/YTKMm/

于 2013-07-26T19:36:53.743 に答える