如何使用jQuery UI制作可拖动,可排序,可丢弃的卡片?

时间:2014-02-27 05:51:02

标签: javascript jquery jquery-ui jquery-draggable jquery-droppable

我希望手中有扑克牌,但要让它们在新的空间里可以放置。卡片也应该可以重新排序(可排序)。

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

它确实不起作用......如果它们没有被丢弃,它们不会恢复到它们的旧空间,如果它们被丢弃,它们也不会被正确地附加到新空间中。 (虽然如果它们被丢弃会发生一些事情,但目前还不清楚是什么。)

如何才能使其发挥作用?

1 个答案:

答案 0 :(得分:0)

$(“#hand .card”)。draggable({         appendTo:“body”,         光标:“移动”,         帮手:'克隆',         还原:“无效”     });

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