在不使用jQuery可排序的情况下通知丢弃元素的顺序

Question

https://jsfiddle.net/ianderso222/y9ynouxs/36/

我希望这是合理的，如果我需要详细说明，我会这样做。

现在，代码运行得很好，做了我需要做的所有事情，除了这个问题。我只需要提醒顺序，广场已经被丢弃，在所有4个已经放置。

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

我会使用排序，但我担心它将不能与当前的设置工作。调整大小大小的容器将无法工作，或者至少我无法使它工作。如果有办法保持当前的结构大小来填充容器并滑动到适当的位置，我会说这样做，但从我所看到的每一件事情上，我觉得我必须从根本上从头开始。

这是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
    });
  }
});

Answer 1

看看我的解决方案：

演示

首先，它在每次下降时都将一个data-current属性分配给droppable持有者，并将其设置为draggable的id。

然后对所有.holder元素进行倾斜处理，并打印出它们的data-current。

很简单但很管用。

 // 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'));
 });