jQuery实现拖拽效果插件的方法

这篇文章主要介绍了jQuery实现拖拽效果插件的方法,较为详细的分析了jQuery拖拽效果的实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现拖拽效果插件的方法。分享给大家供大家参考。具体如下：

下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素，这个插件可以在移动设备上运行
 

1. /** 
2. * jQuery Drag and Scroll 
3. * 
4. * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) 
5. * Dual licensed under the MIT and GPL licenses: 
6. * http://www.opensource.org/licenses/mit-license.php 
7. * http://www.gnu.org/licenses/gpl.html 
8. */ 
9. (function($){ 
10. var down = false; 
11. var prevX = 0; 
12. var prevY = 0; 
13. var x = 0; 
14. var y = 0; 
15. var px = 0; 
16. var py = 0; 
17. var lastPX = -1; 
18. var lastPY = -1; 
19. var $target = null; 
20. var $me = null; 
21. var $selector = ""; 
22. var settings = { 
23. mouseButton: 3, 
24. context: false, 
25. selectText: false 
26. }; 
27. $.fn.dragScroll = function(options){ 
28. settings = $.extend(settings, options); 
29. $selector = $(this).selector; 
30. $(this).contextmenu(function(){ 
31. return false; 
32. }).bind("mousedown touchstart", function(e){ 
33. $me = $(this); 
34. e = event.touches ? event.touches[0] : e; 
35. $target = $(e.target); 
36. $target = $target.closest($selector); 
37. if(settings.viewPort){ 
38. if(!settings.context){ 
39. $me.contextmenu(function(){ 
40. return false; 
41. }); 
42. } 
43. } 
44. if(!settings.selectText){ 
45. $me.attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false); 
46. } 
47. $me = $me.closest($selector); 
48. if($target && $me.attr("id") != $target.attr("id")){ 
49. return false; 
50. } 
51. if(e.which == settings.mouseButton || event.touches){ 
52. $me.css("cursor", "move"); 
53. down = true; 
54. } 
55. px = $me.scrollLeft(); 
56. py = $me.scrollTop(); 
57. x = px + e.pageX; 
58. y = py + e.pageY; 
59. prevX = x; 
60. prevY = y; 
61. return true; 
62. }).bind("mouseup touchend", function(e){ 
63. $me = $(this); 
64. e = event.touches ? event.touches[0] : e; 
65. $me.css("cursor", "auto"); 
66. down = false; 
67. }).bind("mousemove touchmove", function(e){ 
68. $me = $(this); 
69. $me = $me.closest($selector); 
70. e = event.touches ? event.touches[0] : e; 
71. if((e.which == settings.mouseButton || event.touches) && down){ 
72. if(event.touches){ 
73. event.preventDefault(); 
74. } 
75. if($target && $me.attr("id") != $target.attr("id")){ 
76. return false; 
77. } 
78. $me.css("cursor", "move"); 
79. px = $me.scrollLeft(); 
80. py = $me.scrollTop(); 
81. x = px + e.pageX; 
82. y = py + e.pageY; 
83. $me.scrollLeft(px + (-(x - prevX))); 
84. $me.scrollTop(py + (-(y - prevY))); 
85. prevX = x - (x - prevX); 
86. prevY = y - (y - prevY); 
87. if(lastPX == px) 
88. prevX = x; 
89. if(lastPY == py) 
90. prevY = y; 
91. lastPX = px; 
92. lastPY = py; 
93. } 
94. return true; 
95. }); 
96. return this; 
97. } 
98. })(jQuery); 

希望本文所述对大家的jQuery程序设计有所帮助。