Javascript 在不使用jQuery sortable的情况下提醒已删除元素的顺序

我希望这是有意义的，如果我需要详细说明，我会这样做

现在代码运行得很好，除了这个问题，我做了所有需要它做的事情。我只需要提醒顺序，在所有4个方块都放置好之后，方块已经被放入

因此，如果将square4放置在大型容器中，则会首先显示在警报中。如果平方2在最后一个最小的框中，它将是列表中的最后一个框，依此类推

我会使用sortable，但我担心它在当前设置下无法工作。调整大小到不同大小的容器将不起作用，或者至少我无法让它工作。如果有一种方法可以保持当前的结构，即调整大小以填充容器并滑动到位，我会这么说，但从我所看到的一切来看，我觉得我必须从零开始

这是JavaScript，请原谅混乱的代码：

$('.holderList li').droppable({
  drop: function(event, ui) {

    var droppable = $(this);
    var draggable = ui.draggable;

    console.log(draggable.attr('id') + ' is ' + droppable.attr('id'));

    var $this = $(this);
    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, 200, "linear");
      }
    });

    ui.draggable.addClass('dropped');
    ui.draggable.data('droppedin', $(this));
    $(this).droppable('disable');

    setTimeout(function() {
      var dragID = ui.draggable;

      if (!$(".ui-droppable").not(".ui-droppable-disabled").length) {
        alert(draggable.attr('id'));
      }
    }, 400);
  },
});

$(".square").draggable({
  stack: ".square",
  revert: function(event, ui) {
    //overwrite original position
    $(this).data("ui-draggable").originalPosition = {
        width: 50,
        height: 50
      }
      //return boolean
    return !event;
  },
  drag: function(event, ui) {
    var draggable = $(this).data("ui-draggable");

    $.each(draggable.snapElements, function(index, element) {
      ui = $.extend({}, ui, {
        snapElement: $(element.item),
        snapping: element.snapping
      });
      if (element.snapping) {
        if (!element.snappingKnown) {
          element.snappingKnown = true;
          draggable._trigger("snapped", event, ui);
        }
      } else if (element.snappingKnown) {
        element.snappingKnown = false;
        draggable._trigger("snapped", event, ui);
      }
    });
    if ($(this).data('droppedin')) {
      $(this).data('droppedin').droppable('enable');
      $(this).data('droppedin', null)
      $(this).removeClass('dropped')
    }
  },
  snap: ".holder",
  snapMode: "inner",
  snapTolerance: 8,
  snapped: function(event, ui) {
    var squareWidth = ui.snapElement.width();
    var squareHeight = ui.snapElement.height();



    ui.helper.css({
      width: squareWidth,
      height: squareHeight
    });
  }
});

---

看看我的解决方案：

首先，它在每次拖放时为可拖放的保持架分配一个

数据当前

属性，并将其设置为可拖放的id

然后，它通过所有

.holder

元素打印它们的

当前数据

简单但有效

 // On single drop
 drop: function(event,ui){
 ...
   droppable.attr('data-current', draggable.attr('id') );
 }

 //On all dropped
 $('.holder').each(function(el){
   console.log($(this).attr('data-current'));
 });