如何使用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

$（“＃hand .card”）。draggable（{appendTo：“ body”，光標：“ move”，助手：'clone'，恢復：“ invalid”}）;

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