<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name = "Generator "CONTENT =" EditPlus "> <meta name =" Author "CONTENT =" "> <meta name =" Keywords "CONTENT =" "> <meta name =" Description "CONTENT = ""> <meta content-type = "text/html" charset = "gb2312"/> <style type = "text/css"> body {padding: 0px; text-align: center; font: 12px Arial;} div. container {width: 100 Px; height: 100px; border: 1px solid #000; margin: 10px auto;} div # main {width: 99px; height: 99px; border: 1px solid #000; background: #050; color: # fff; font: 12px Arial; margin: auto;} p {text-algin: left ;} </style> </HEAD> <BODY> drag me <p> move the cursor over the Green Box and drag it, when the position of the square is close to a box and the edge of the box is red, you can open the mouse and the square will automatically enter the box. If you open the mouse at other positions, the square will return to the previous position. </P> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]