How can I use jQuery UI to make a draggable, sortable, droppable card thing?

Question

I want to have playing cards in a hand, but make them droppable in a new space. The cards should also be reorderable (sortable) in the hand.

[   #new_space                          ]

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

Here's what I've tried for 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": ""
    })
  })    

It doesn't really work though... the cards aren't reverting to their old space if they weren't dropped, nor are they getting appended properly into the new space if they were dropped. (Although something is happening to them if they were dropped, it's unclear what.)

How can this be made to work?

Answer 1

$("#hand .card").draggable({ appendTo: "body", cursor: "move", helper: '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": ""
})