欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

div拖拽效果 JQuery

程序员文章站 2022-09-27 15:52:19
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>

 

上一篇： Redis基础类型常用操作命令

下一篇： 【原】无脑操作：Centos 7后台运行及终止jar包程序

推荐阅读