Question

我正在jQueryUI和draggable使用droppable。

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

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

只要可投放区域有超过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);
    }
  });
});

在下降中，你已经有了一个很好的检查。因此，如果img时目标中有drop个元素，您需要附加下拉，然后将第一个元素追加回源。

我添加了一些简单的.hide()和.show()动画，以使其更加精美。我还调整了每个图像，这样你就可以看到正确的项目正在向后移动。

我怀疑有办法以某种方式为回归制作动画，这不是我的伎俩。但如果你的包里有这个，那么这应该可以帮到你。

评论后更新

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

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

由于我们一遍又一遍地销毁/创建可拖动的东西，我做了一个功能来帮助你做到这一点。拖放添加了一堆样式以保留定位，因此当我将class传递回源时，我将其删除img。

<强>的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未定义

$。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 - 一次只能删除一个

1 个答案: