JQuery와 낙하 할 마지막

Question

에서 내가

$("#contenitore").droppable({ 
    hoverClass: "drag-over_ca", 
    tolerance: 'pointer', 
    greedy: true, 
    drop: function(event, ui) { 
    $(ui.draggable).appendTo(this); 
    } 
}); 

드래그

낙하 할 낙하 할 드래그 HTML 요소의 조합을했습니다없는 항목을 삭제

잘 작동하지만,이 elemente 이제까지 넣어 떨어졌다

$("div.element-container").draggable({ 
    cursorAt: { left: 92, top: 50} , 
    cursor: "move", 
    revert: "invalid", 
    helper: "clone", 
    appendTo: "body", 
    drag: function(event, ui) { 

    $(this).css({opacity:0.4}); 
    $(ui.helper).addClass("handled"); 
     }, 
    stop: function(event, ui) { 
    $(ui.helper).removeClass("handled"); 
    $(this).css({opacity:1}); 
    } 
}); 

목록의 마지막에 떨어졌다. 목록의 맨 위에 요소를 놓거나 목록의 다른 요소에 요소를 놓을 수있는 방법.

n.b.

처음에 요소를 드롭하거나 을 입력해야합니다. 마지막으로 드롭하지 않고 정렬 가능한 순서로 전환해야합니다.

Answer 1

div.element-container를 드래그 가능 + 정렬 가능하도록 만듭니다. 당신은 그것을 할 수 있습니다 -

 
$("div.element-container").draggable({ 
    connectToSortable: "#contenitore", 
    cursorAt: { left: 92, top: 50} , 
    cursor: "move", 
    revert: "invalid", 
    helper: "clone", 
    appendTo: "body", 
    drag: function(event, ui) { 

    $(this).css({opacity:0.4}); 
    $(ui.helper).addClass("handled"); 
     }, 
    stop: function(event, ui) { 
    $(ui.helper).removeClass("handled"); 
    $(this).css({opacity:1}); 
    } 
}); 

$("#contenitore").sortable({ 
     revert: true 
});