如何使用jQuery UI製作可拖放的可排序卡片？

我希望手中有紙牌，但要讓它們在新的空間中投籃。牌也應該可以在手中進行重新訂購（可排序）。如何使用jQuery UI製作可拖放的可排序卡片？

[ #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": "" 
    }) 
    })

它並沒有真正的工作，雖然......如果他們不掉線卡片沒有恢復到其舊的空間，如果它們被丟棄，它們也不會被正確地追加到新的空間中。（雖然有些事情發生在他們身上，但如果他們被拋棄，目前還不清楚）

這是如何工作的？

來源

2014-02-27 Some Guy

$（「＃手.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": "" 
})

來源

2014-02-27 06:20:45 ishvar

如何使用jQuery UI製作可拖放的可排序卡片？

回答

相關問題