JQueryUI - 一次只能放下一个

Question

我将 jQueryUI 用于 draggable 和 droppable。

如果我在可放置区域放置一个元素，然后再次尝试放置第二个对象。第一个放置的元素应该自动移除并移动到可拖动区域。

Basically, only one element should be in droppable area.

只要可放置区域有超过 1 个元素。它应该只删除最后一个元素。如果再添加一个元素。可放置区域不能有超过 1 个对象。

代码：

$("#dvSource img").draggable({
    revert: "invalid",
    //refreshPositions: true,
    drag: function (event, ui) {
        ui.helper.addClass("draggable");
    },
    stop: function (event, ui) {
        ui.helper.removeClass("draggable");
        if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                console.log($("#dvDest img").length);   
        }
        else {
            //alert(image + " not dropped.");
        }
    }
});
$("#dvDest").droppable({
    drop: function (event, ui) {
        if ($("#dvDest img").length == 0) {
            $("#dvDest").html("");
        }
        ui.draggable.addClass("dropped");
                $("#dvDest").append(ui.draggable);
    }
});

Answer 1

我不太擅长动画，但这是一种方法。

工作示例：https://jsfiddle.net/Twisty/6auhhjxc/5/

jQuery

$(function() {
  $("#dvSource img").draggable({
    revert: "invalid",
    drag: function(event, ui) {
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {
      ui.helper.removeClass("draggable");
      if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
        console.log($("#dvDest img").length);
      }
    }
  });
  $("#dvDest").droppable({
    drop: function(event, ui) {
      if ($("#dvDest img").length === 0) {
        $("#dvDest").html("");
      } else {
        $("#dvDest img:first").hide(600, function() {
          $(this).appendTo("#dvSource");
        }).show(600);
      }
      ui.draggable.addClass("dropped");
      $("#dvDest").append(ui.draggable);
    }
  });
});

滴，你已经好好检查过了。因此，如果当您 drop 时目标中有 img 个元素，您将需要追加放置，然后将第一个元素追加回源。

我添加了一些简单的 .hide() 和 .show() 动画来让它看起来更漂亮。我还调整了每张图片，所以你可以看到正确的项目正在向后移动。

我怀疑有办法以某种方式为 return 设置动画，但这不在我的技巧范围之内。但如果它在你的包里，这应该会让你到达那里。

评论后更新

工作示例：https://jsfiddle.net/Twisty/6auhhjxc/7/

我在您的可拖动代码中发现了一个问题，该问题不断抛出错误。我删除了它。

因为我们 destroy/create 一遍又一遍地拖拽，我做了一个函数来帮助做到这一点。 drag/drop 添加了一堆样式以保持定位，因此当我将 img 传回源时，我将其和 class 删除。

jQuery

function makeDrag(el) {
  // Pass me an object, and I will make it draggable
  el.draggable({
    revert: "invalid"
  });
}
$(function() {

  makeDrag($("#dvSource img"));

  $("#dvDest").droppable({
    drop: function(event, ui) {
      if ($("#dvDest img").length === 0) {
        $("#dvDest").html("");
      } else {
        $("#dvDest img:first").hide(600, function() {
          $(this).removeAttr("class");
          $(this).removeAttr("style");
          $(this).appendTo("#dvSource");
        }).show(600, function() {
          makeDrag($(this));
        });
      }
      ui.draggable.addClass("dropped");
      ui.draggable.draggable("destroy");
      $("#dvDest").append(ui.draggable);
    }
  });
});

您 stop 中导致问题的代码：

if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
    console.log($("#dvDest img").length);
}

我切换到未压缩版本，抛出的错误是：

TypeError: draggable is undefined

$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), ...

这部分代码是：

    $.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {

        if ( !this.options ) {
            return;
        }
        if ( !this.options.disabled && this.visible && $.ui.intersect( draggable, this, this.options.tolerance, event ) ) {
            dropped = this._drop.call( this, event ) || dropped;
        }

        if ( !this.options.disabled && this.visible && this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
            this.isout = true;
            this.isover = false;
            this._deactivate.call( this, event );
        }

    });

在最小化代码中，这是 t，但问题是一样的。当您将 ui.helper.data("draggable") 传递给 $.ui.ddmanager.drop() 时，该值是 null 或 undefined。在您的脚本范围内，这样做的原因是 ui.helper 没有 data-draggable 属性。

同样，不清楚那里的预期操作是什么，所以我简单地删除了它。

JQueryUI - 一次只能放下一个

JQueryUI - droppable only one at a time

jquery

drag-and-drop

jquery-ui

jquery-ui-draggable