JQueryUI - 一次只能放置一个

Question

我将jQueryUI 用于draggable 和droppable。

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

基本上，只有一个元素应该在可放置区域中。

Here fiddle demo

只要可放置区域有超过 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() 动画来让它看起来更漂亮。我还调整了每个图像，因此您可以看到正确的项目正在向后移动。

我怀疑有办法以某种方式对返回进行动画处理，但这不在我的技巧包中。但如果它在你的包里，这应该能让你到达那里。

评论后更新

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

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

由于我们一遍又一遍地销毁/创建可拖动对象，因此我创建了一个函数来帮助执行此操作。拖放添加了一堆样式以保留定位，因此当我将 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 属性。

同样，不清楚预期的操作是什么，所以我只是将其删除。