Question

我目前正在开发一个拖放插件。我想添加一个功能，以便用户可以限制可拖动对象的拖放次数。我将这个功能叫做dragLimitation。

这是我到目前为止所做的：

var limit = 0;
                $(document).ready(function() {
                    $(oj).mouseup(function() {
                        if (o.dragLimitation !== false) {
                           if (limit > (o.dragLimitation-1)) {
                           //Code to Stop Drag Here
                            } else {
                                limit++;
                                $('#back').html(limit);
                            }
                        }

                    });
                });

关于守则：我想向大家透露一些事情，以便我能得到答案。

$(oj).mouseup(function() {中的var，oj仅指this。在这种情况下，this将是：$('#drag').jDrag();，这只是为了让我的插件运行。

#drag = this

我想指出的一点是o.dragLimitation。这是为了获得拖放项目/对象可以被删除的次数（mouseup）。

示例：

$('#drag').jDrag({
dragLimitation: 20
});

这样可以将#drag拖放到 20 次。

我有很多代码，但我不知道如何阻止元素拖动。我不打算使用以下代码破坏代码：

$('body').append('<span>');

因此用户仍然可以使用页面的其余部分。

这里是停止拖动的代码应该是：

if (limit > (o.dragLimitation - 1)) {
    //Code to Stop Drag Here
}

我真的希望有人可以帮我详细说明。谢谢你的帮助。

Answer 1

(function($) {
  $.extend($.fn, {
    jDrag: function() {
      var dragCount = this.data("jDrag.dragCount"),
          limitation = this.data("jDrag.limitation");

      if(typeof dragCount !== "number" || !isFinite(dragCount))
          {
            /*
             * Drag count isn't a valid number.
             * Give it a 0 value, and save it to the target.
             */

            dragCount = 0;
            this.data("jDrag.dragCount", dragCount);
          }

      if(typeof limiation !== "number" || !isFinite(limitation))
          {
            /*
             * Limitation isn't a valid number.
             * Load default limitation from plugin defaults.
             */

            limitation = $.data("jDrag.defaults").limitation;
          }

      if(dragCount <= limitation)
          {
            /*
             * Drag limitation isn't yet exceeded, increment count
             * and save it to the target.
             */

            this.data("jDrag.dragCount", ++dragCount);

            /* Continue code here. */
          }
    }
  });
})(jQuery);

有关内部存储插件数据的信息，请参阅jQuery.data方法。正如您可能看到的，上面的代码只是加载目标被拖动的次数，以及对目标的限制。如果dragCount不是有效数字，则为其赋予dragCount零（稍后更改为1）。如果限制不是有效数字，则会加载存储在插件数据中的插件默认限制。

请注意，我们使用了this.data，但之后我们使用了$.data。使用this.data时，此信息存储在特定元素上。使用$.data将为插件本身加载数据。由于我们使用this.data来存储特定元素的信息，因此您可以轻松地在不同元素上存储不同的拖动限制，而不是使它们共享相同的限制。如果你遵循这个大纲，你就不应该有任何问题。

注意：我没有测试过这个脚本。这只是一个基本想法。

更新：为代码添加了评论以便更好地理解。

Answer 2

您不一定需要任何代码来停止拖放功能，您只需在中包含代码拖放功能如果检查是否已满足限制。如果有，那么拖放代码就不会执行。

停止拖动可拖动对象

2 个答案: