我要评论 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>
如对本文有疑问， 点击进行留言回复！！
网友评论