JSQueryUI는 하나의 ul에서 다른 그룹으로 정렬 가능합니다.

Question

나는 메뉴 플래너를 작성하고 있습니다. 드래그 가능하고 정렬 가능한 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(); 
      } 
     }); 
    }); 

을});

화요일의 메뉴에 식품 항목의 항목을 추가하는 경우 화요일에 항목을 다시 드래그하여 월요일에 놓을 수 있습니다.

그러나 다른 날에는 삭제할 수 없습니다. 하지만 월요일에 식사 시간이 있으면됩니다.
나는 완전히 당혹 스럽다.

이유를 아는 사람이 있습니까? 당신의 정렬 설정에서

Answer 1

, 당신은이 :

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

을 주목 connectWith: "ul"합니다. 즉 다른 ul에들 수 있습니다. sortables이 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> 

주의 사항 :

여기에 월요일의 마크 업입니다.

다음은 화요일을 (그리고 매일의) 마크 업 :

<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하지 ul의, 그래서 그들은 방울을 허용하지 않습니다.

가장 쉬운 해결책은 사실이 될 수 있습니다

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

http://jsfiddle.net/YTKMm/