拖放可以在droppable中获取多个图像的ID

时间:2016-06-02 03:14:20

标签: javascript jquery html drag-and-drop

我是jquery的新手,对此毫无疑问,我希望我的提交按钮能够在droppable中获取多个图像的ID,任何人都可以提供帮助吗?请帮助我或引导我...我需要获取仅在droppable中拖动的图像的ID以及按下提交按钮时..显示仅在droppable内部的图像..

的jsfiddle

https://jsfiddle.net/xInfinityMing/azvvhxvL/

的JavaScript

$(function() {
$("#dragIcons img").draggable({
  revert: "invalid",
  refreshPositions: true,
  cursor: "move",
  cursorAt: {
    top: 56,
    left: 56
  },
  drag: function(event, ui) {
    ui.helper.removeClass("end-draggable");
    ui.helper.addClass("draggable");
  },
  stop: function(event, ui) {
    ui.helper.addClass("end-draggable");
    ui.helper.removeClass("draggable");
  }
});

$("#briefcase-full").droppable({
  greedy: true,
  tolerance: 'touch',
  drop: function(event, ui) {
    var id = ui.draggable.attr("id");
    alert(id);
    if ($("#briefcase").length == 0) {
      $("#briefcase-droppable").html("");
    }

      ui.draggable.addClass("dropped");
      $("#briefcase-droppable").append(ui.draggable);
    }
  });
});

1 个答案:

答案 0 :(得分:1)

基本上,所有拖动的元素都会进入droppable。因此,您可以使用children检查每个元素。

$("#briefcase-droppable").children(".icons").each(function() { var icon_id= $(this).attr("id"); });

JSFiddle:Link

我建议您使用类而不是使用img元素来附加draggable事件。