標籤：style blog http color io os ar java sp
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 5 <title>拖拽</title> 6 <style> 7 #drag{ 8 position:absolute; 9 width:200px;10 height:100px;11 background-color:red;12 }13 </style>14 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>15 <script type="text/javascript">16 $(function(){17 18 var is_drag=false;19 var x=0;20 var y=0;21 22 $("#drag").mouseover(function(){$(this).css("cursor","move");});23 24 $("#drag").mousedown(function(){25 is_drag=true;26 x=event.offsetX;27 y=event.offsetY;28 $(this).css("cursor","move");29 });30 31 $("#drag").mouseup(function(){is_drag=false;});32 33 $(document).mousemove(function(){34 if(!is_drag){return;}35 $("#drag").css({"left":event.clientX-x,"top":event.clientY-y,"cursor":"move"});36 });37 38 });39 </script>40 </head>41 <body>42 <div id="drag"></div>43 </body>44 </html>View Code
js拖拽 jquery實現
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
