Question

我是jquery的新手，请帮助或指导我... 我想以不同的div为我的droppable显示不同的ID。我该怎么做？我是否需要阵列所有图像？现在只显示一个div上的所有内容..我想如果拖放在droppable中..它取得droppable中的值并显示在不同的div中。

的jsfiddle

https://jsfiddle.net/xInfinityMing/tv32ncsn/

的Javascript

$(function() {
$("#dragIcons .icons").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");
  }
});
$('#reset').click(function(e) {
e.preventDefault();
var dropped_icon = $('#briefcase-droppable')
  .children()
  .detach()
  .removeClass('dropped end-draggable')
  .removeAttr('style')
  .css('position', 'relative');

  $('#dragIcons').append(dropped_icon);
  $('#briefcase').css('background', 'url("http://everyguyed.com/wp-content/uploads/2011/03/mens-guide-to-briefcases-4.jpg")');
});
$("#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);
    }
});
$("#submitButton").click(function() {
  var draggedIcons = "";
  $("#briefcase-droppable").children(".icons").each(function() {
    draggedIcons += '<li>' + $(this).attr("id") + '</li>';
  });
    $('#listIcon').html(draggedIcons);
  });
});

在不同的div

0 个答案: