어떻게 jQuery UI를 사용하여 드래그 가능하고, 정렬 가능하며, 삭제 가능한 카드를 만들 수 있습니까?

Question

카드를 손에 들고 싶지만 새로운 공간에서 카드를 떨어 뜨릴 수 있습니다. 카드는 손으로 재주문이 가능해야합니다. 여기

[ #new_space       ] 

[ #hand [.card] [.card] [.card]  ] 

내가 JS에 대해 무엇을 시도한 것 : 그들은 삭제되지 않은 경우

$("#hand").sortable({ 
    distance: 15, 
    opacity: 0.75, 
    placeholder: "card medium invisible" 
}) 

$("#hand .card").draggable({ 
    distance: 15, 
    revent:"invalid", 
    opacity: 0.75, 
    placeholder: "card medium invisible" 
}) 

$("#new_space").droppable(
    hoverClass: 'ui-state-highlight', 
    drop: function(event, ui) { 
    var $card = $(event.originalEvent.target) 
    $("#new_space").append($card) 
    $card.css({ 
     "top": "", 
     "left": "", 
     "right": "", 
     "bottom": "" 
    }) 
    })  

정말 그래도 작동하지 않는이 ... 카드가 그들의 오래된 공간으로 되 돌리는되지 않습니다, 그들이 떨어 뜨리면 새로운 공간에 제대로 추가되지도 않습니다. (떨어 뜨리면 무엇인가가 일어나고 있지만, 무엇이 불분명 한가요?)

어떻게 작동시킬 수 있습니까?

Answer 1

$ ("# 손 .card") 드래그 ({ appendTo : "몸", 커서 : "이동", 도우미 : '클론', 되돌리기 : "무효" }).;

$("#new_space").droppable({ 
    tolerance: "intersect", 
    accept: "#hand .card", 
    hoverClass: "ui-state-hover", 
    drop: (function (event, ui) { 
$(this).append($(ui.draggable)); 
$card.css({ 
    "top": "", 
    "left": "", 
    "right": "", 
    "bottom": "" 
})