<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>javascript Drag Sample Web page--solve the problem of fast dragging </title> <meta name=" Description "content=" JavaScript drag and drop a Companion sample Web page for the article. This example solves the problem of stopping the movement of elements when they are fast dragging. "/> <meta name=" Keywords "content=" drag, example, Dom,javascript,jscript "/> <style type=" text/css "> Drag{bord" ER:1PX solid; width:400px; Background: #CCCCCC;} #test1 {top:20px;} #test2 {left:40px;} </style> <script type= "Text/javascript" > var dragelement = null; var Mousey; var MouseX; var x= ""; var y= ""; var max = 1; function Draginit (node) {if (Node.classname = = "Drag") {Node.onmousedown = down; Document.onmousemove = move; Node.onmouseover = over; Node.style.position = "relative"; Node.dragging = false; var children = Node.childnodes; For(var i = 0;i < children.length; i++) {draginit (children[i]); } window.onload = function () {draginit (document); Document.onmouseup = Docup; Function down (event) {event = event | | window.event; Dragelement = this; MouseX = parseint (EVENT.CLIENTX); Mousey = parseint (Event.clienty); Objy = parseint (Getnodestyle (dragelement, "top")); OBJX = parseint (Getnodestyle (Dragelement, "left")); IE does not return the CSS attribute not set if (!OBJY) objy=0; if (!OBJX) objx=0; This.style.zIndex = max++; function Move (event) {event = event | | window.event; if (dragelement) {var x,y; y = Event.clienty-mousey + objy; x = Event.clientx-mousex + objx; DragElement.style.top = y + "px"; DragElement.style.left = x + "px"; After the element is moved, the delay is document.onmousemove = null; settimeout ("document.onmousemove = Move;", 40); }} function Docup () {dragelement = null; function over () {this.style.cursor = ' move '; function Getnodestyle (node,stylename) {var realstyle = null; if (Node.currentstyle) {REAlstyle = Node.currentstyle[stylename]; }else if (window.getcomputedstyle) {Realstyle = window.getComputedStyle (Node,null) [stylename]; return realstyle; </script> </pead> <body> <div class= "Drag" id= "test1" > <p> I'm dragging example DIV1. </p> <p> can test the effect. </p> </div> <div class= "Drag" id= "test2" > <p> I am Drag-and-drop example DIV2. </p> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
