JSQueryUI sortable from one ul to another

Question

I am building a menu planner Using JSQuery UI draggable and sortable. Please take a look at the 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();
            }
        });
    });

});

If you add items from the food items into the menu under Tuesday for instance, you can then re-drag an item in Tuesday and drop it into Monday.

But you are not able to drop it on any other day. But you any meal time on Monday will work.
I am completely puzzled.

Would anyone know why?

Answer 1

In your sortable setup, you have:

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

Notice the connectWith: "ul" . That means you can drop onto other ul s.

Here's Monday's markup:

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

Notice the sortables are ul s.

Here's Tuesday's (and every other day's) markup:

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

The sortables are divs , not ul s, so they won't accept the drops.

The easiest solution might actually be this:

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

http://jsfiddle.net/YTKMm/