阻止可拖动对象拖动

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 。 这是为了获得拖放项目/对象可以被拖放的次数（鼠标）。

例：

$('#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

你并不一定需要任何代码停止拖/放功能，您应该只是包装了代号为拖/在拖放功能，如果如果限制已经满足，检查。 如果具有，则将不会执行拖放代码。