As the title says, the principle is to make div position absolute positioning Absolute, and then control its top and left values, and the friends you need can refer to the following
Code demo: http://www.imqing.com/demo/movediv.html Approximate principle: Make div position Absolute positioning Absolute, then control its top and left values, need to monitor mouse events, mainly to MouseDown, MouseMove, MouseUp. After MouseDown, record MouseDown mouse and need to move the position of the Div, and then get the difference between the two, get the mouse after the move, div position. That is,: left = current mouse position. x-(when mouse clicks. x value-div initial position x value) top = current mouse position. Y-(when the mouse clicks the. Y value-the initial position of the Div y value) code : Code as follows: <! DOCTYPE html> <html lang= "en" > <head> <meta http-equiv= "Content-type" content= " Text/html;charset=utf-8 "> <title>qing ' s web</title> <script src="./ Jquery-1.7.2.min.js "type=" Text/javascript ></script> <style type= "Text/css" > . Footer { position:fixed; bottom:0; width:100%; } movebar { position:absolute; width : 250px; height:300px; background: #666; border:solid 1px #000; } #banner { Backgrou Nd: #52CCCC; cursor:move; } </style> </head> <body style= "padding-top:50px;" > <div class= "Movebar" > <div id= "banner" > Press here to move the current div</div> <div class= "Content" > here are the other content </div> </div> <div class= "Footer" > <p align= " Center "class=" label ">all Rights Reserved Qing copyright </p> </div> <script> jQuery ( Document). Ready ( function () { $ (' #banner '). MouseDown ( function (event) { var ismove = true;  ; var abs_x = Event.pagex-$ (' div.movebar '). Offset () .left; var abs_y = event.pagey-$ (' div.movebar '). Offset (). top;& nbsp $ (document). MouseMove (function (event) { if (ismove) { var obj = $ (' Div.movebar '); obj.css ({' Left ': Event.pagex-abs_x, ' top ': event.pagey-abs_y}); } } ). MouseUp ( function () { ismove = Fals e; } ); } ); } ); </script> </body> </html> In fact, the amount of code is not much, hehe. The point is that the position of the div that needs to be moved is absolutely positioned and then the mouse event is detected. Hey. 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
