移动市场开始火爆以来，网页上的拖拽效果则要做到全兼容则不是一件易事，因此最近把研究成果奉上，供大家使用。
几点声明：
1.被拖拽的元素不要是超链接，因为阻止了默认事件，所以想让元素内的超链接也打开是不现实的，否则手工取消默认的阻止代码；
2.拖拽意味着该元素是绝对定位，非绝对定位的元素不能被拖拽。
源码：
(function($) { var old = $.fn.drag; function Drag(element, options) { this.ver = '1.0'; this.$element = $(element); this.options = $.extend({}, $.fn.drag.defaults, options); this.init(); } Drag.prototype = { constructor: Drag, init: function() { var options = this.options; this.$element.on('touchstart.drag.founder mousedown.drag.founder', function(e) { var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e, startPos = $(this).position(), disX = ev.pageX - startPos.left, disY = ev.pageY - startPos.top, that = this; //记录初始位置,以便复位使用 $(this).data('startPos', startPos); if (options.before && $.isFunction(options.before)) { options.before.call(that, ev); } $(document).on('touchmove.drag.founder mousemove.drag.founder', function(e) { var ev = e.type == 'touchmove' ? e.originalEvent.touches[0] : e, $this = $(that), $parent = $this.offsetParent(), $parent=$parent.is(':root')?$(window):$parent, pPos = $parent.offset(), pPos=pPos?pPos:{left:0,top:0}, left = ev.pageX - disX - pPos.left, top = ev.pageY - disY - pPos.top, r = $parent.width() - $this.outerWidth(true), d = $parent.height() - $this.outerHeight(true); left = left < 0 ? 0 : left > r ? r : left; top = top < 0 ? 0 : top > d ? d : top; $(that).css({ left: left + 'px', top: top + 'px' }); if (options.process && $.isFunction(options.process)) { options.process.call(that, ev); } e.preventDefault(); }); $(document).on('touchend.drag.founder mouseup.drag.founder', function(e) { var ev = e.type == 'touchend' ? e.originalEvent.changedTouches[0] : e; if (options.end && $.isFunction(options.end)) { options.end.call(that, ev); } $(document).off('.drag.founder'); }); e.preventDefault(); }); } }; //jQ插件模式 $.fn.drag = function(options) { return this.each(function() { var $this = $(this), instance = $this.data('drag'); if (!instance) { instance = new Drag(this, options); $this.data('drag', instance); } else { instance.init(); } if (typeof options === 'string') { //instance.options[options].call(this); } }); }; $.fn.drag.defaults = { before: $.noop, process: $.noop, end: $.noop }; $.fn.drag.noConflict = function() { $.fn.drag = old; return this; }; })(jQuery);
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: green; position: absolute; left: 10px; top: 10px; overflow: hidden; outline: 0; } </style> </head> <body> <div id="div1">div1</div> <script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.drag.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#div1').drag({ before: function(e) { $(this).text('拖动前' + e.pageX); }, process: function(e) { document.title = '拖动中' + e.pageY; }, end: function(e) { $(this).text('拖动完' + e.pageX); } }); </script> </body> </html>