Draggable/Droppable: 无法读取拖放事件中可拖动元素的更新数据-*

Question

下面是我的代码的简化版本。为什么 alert() 一直说 1？我可以看到 HTML data-count 更新到 2 然后停止更新。希望你能帮帮我。

<div class="product" data-count="1"></div>

$(".product").draggable({ 
  helper: function(event) {
    return $(event.target).closest(".product").clone().css({
      width: $(event.target).width()
    });
  }
});

$(".panel-body").droppable({
  drop: function(event, ui) {
    alert(ui.draggable.data("count"));
    ui.draggable.attr("data-count", ui.draggable.data("count") + 1);
    ui.draggable.detach().appendTo($(this));
  }
});

Answer 1

您可以使用此代码：

$(".panel-body").droppable({
  drop: function(event, ui) {    
    //ui.draggable.attr("data-count", ui.draggable.data("count") + 1);
    ui.draggable.data('count', ui.draggable.data('count') + 1);
    alert(ui.draggable.data("count"));
    ui.draggable.detach().appendTo($(this));
  }
});

Online output (fiddle)

Draggable/Droppable: 无法读取拖放事件中可拖动元素的更新数据-*

Draggable/Droppable: Cannot read updated data-* on draggable element in drop-event

jquery

jquery-ui

jquery-ui-draggable