获取jQuery UI中拖放元素的自定义HTML属性

Question

我正在构建一个纸牌游戏，其中每张纸牌（每个具有 card 类的 div）都是可拖动的。默认情况下，这些卡片可以放在所有其他卡片上，但我使用accept option 来计算卡片在被丢弃后是否应该被接受或恢复。一张卡片只能放在另一张价值比拖动卡片高 1 的卡片上。例如，7 只能放在 8 上。卡片的值 (1-13) 存储在自定义属性 data-value 中。

这意味着当一张卡片被放到另一张卡片上时，我需要知道被拖动卡片的 data-value 是否比它所放置卡片的 data-value 小一个。如何访问这两个data-value？

$(".card").draggable({ revert: 'invalid' });

$(".card").droppable({

  accept: function(d) {

    // Here I want to access the custom HTML attribute "data-value" of both dragged card and droppable card

  }

});

Answer 1

我找到了一个解决方案，但我怀疑还有另一个更简单的解决方案。

    $(".card").droppable({     

        accept: function(d) {

            if ($(d[0]).data("value") == $(this).data("value") -1) {

                return true;

            }

        }

    });