div拖拽效果 JQuery ...
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="description" content="jQuery拖拽div" /> 5 <meta charset="utf-8"> 6 <title>JS Bin</title> 7 <style> 8 #div{ width:200px; height:200px; background:#ccc; position:absolute;} 9 #div h1{ height:30px; line-height:30px; font-size:12px; text-align:center;background: #f1f1f1;border-bottom: 1px solid #ccc;} 10 </style> 11 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script> 12 13 </head> 14 <body> 15 <div id="div"><h1>標題</h1></div> 16 <script> 17 $.fn.setDrag = function(options){ 18 var defaults = { 19 }, 20 that = $(this), 21 opts = $.extend({}, defaults, options), 22 doc = $(document), 23 width = $(window).width(), 24 height = $(window).height(), 25 startX = 0, 26 startY = 0, 27 lastX = 0, 28 lastY = 0, 29 box = that.parent(), // handler.parentNode 30 handler = that[0], 31 drag = { 32 down: function(e){ 33 that.css('cursor', 'move'); 34 startX = e.clientX - parseInt(box.css('left')); 35 startY = e.clientY - parseInt(box.css('top')); 36 this.setCapture && this.setCapture(); // IE to prevent fast drag losing of object 37 doc.on('mousemove', drag.move); 38 doc.on('mouseup', drag.up); 39 return false; // chrome to prevent rolling screen, and the loss of the mouse move style 40 }, 41 move: function(e){ 42 lastX = e.clientX - startX; 43 lastY = e.clientY - startY; 44 lastX = Math.max(0, Math.min(width - box.outerWidth(), lastX)); 45 lastY = Math.max(0, Math.min(height - box.outerHeight() - 1, lastY)); 46 box.css({'top': lastY + 'px', 'left': lastX + 'px'}); 47 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // cancel the selected text 48 e.stopPropagation(); 49 }, 50 up: function(){ 51 // that.css('cursor', 'auto'); 52 doc.off('mousemove', drag.move); 53 doc.off('mouseup', drag.up); 54 handler.releaseCapture && handler.releaseCapture(); // IE to prevent fast drag losing of object 55 } 56 }; 57 that.on('mousedown', drag.down); 58 } 59 60 $('#div h1').setDrag(); 61 </script> 62 63 </body> 64 </html>
