Question

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

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

现在代码工作得很好，除了这个问题外，我还需要做我需要的一切。在放置所有4个方块之后，我只需要提醒已经放入方块的顺序。

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

我会使用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
    });
  }
});

Answer 1

看看我的解决方案：

Demo

首先，它会在每个drop上为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'));
 });

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

1 个答案:

Demo