停止拖动可拖动对象

我目前正在处理拖放插件。我想添加一个功能，以便用户可以限制可拖动对象可以被拖放的次数。我将称之为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); 
          } 
         } 

        }); 
       });

关于代码：有几件事情我想清楚你们这样我就可以得到答案。

var，oj：$(oj).mouseup(function() {只是指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 
}

我真的希望有人能帮助我，我给的细节。感谢您的帮助。

来源

2011-12-10 Shawn31313

(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来存储关于特定元素的信息，因此您可以轻松地在不同元素上存储不同的拖动限制，而不是使它们都具有相同的限制。如果你遵循这个大纲，你不应该有任何问题。

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

更新：添加了注释，以便更好地理解编码。

来源

2011-12-10 18:20:54 Mikett

所以当添加此代码。它应该工作？我把我的完整插件放在评论标签的地方，说：继续代码在这里。 – Shawn31313

这可能会很困难，因为我必须添加选项和所有内容 – Shawn31313

您必须调整代码才能使用上面的布局。你不能只将东西粘贴到位，并期望它们工作。如果您等待，我会发布一个JSFiddle示例的链接。 – Mikett

-1

你不一定需要任何代码停止拖/放功能，您应该只是包装的代码为拖/在如果来检查，如果限制已经达到拖放功能。如果它有拖动/拖放代码不会执行。

来源

2011-12-10 17:18:43 anson

我想这样做，但我不想 – Shawn31313

停止拖动可拖动对象

回答

相关问题