Как я могу использовать пользовательский интерфейс jQuery для создания перетаскиваемой, сортируемой, сбрасываемой карты?

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", revert: "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": ""
})