阻止可拖動對象拖動

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

你並不一定需要任何代碼停止拖/放功能，您應該只是包裝了代號為拖/在拖放功能，如果如果限制已經滿足，檢查。 如果具有，則將不會執行拖放代碼。