JavaScript implementation mouse Select drag or ctrl select Drag _javascript Tips

<style> *{position:absolute;} #panel *{border:1px Solid Gray} </style> <script>/********** to judge the browser **********/var Isie = false; if (document.all) Isie = true; /*******hasharray*******/function Hasharray () {this.keylist = new Array (); This.put = function (key, value) {This[key] = value; if (!this.containskey (key)) {This.keyList.push (key); } this.size = function () {return this.keyList.length; } This.containskey = function (key) {if (this.keyList.length = 0) return false; var keystr = This.keyList.join (",") + ","; if (Keystr.indexof (key + ",") = = 1) {return false; }else{return true; } This.get = function (key) {return this[key]; } This.keyset = function () {return this.keylist; } this.isempty = function () {return this.keylist.length==0; } This.remove = function (key) {if (This.containskey (key)) {delete This[key]; This.keyList.splice (This.getindex (key), 1); } This.removeall = function (key) {for (var i=0;i<this.keylist.length;i++) {Delete this[ This.keylist[i]]; } this.keyList.length = 0; } This.getindex = function (key) {for (Var i=0;i<this.keylist.length;i++) {if (this.keylist [i] = = key) return i; } this.tostring = function () {var str = ""; for (Var i=0;i<this.keylist.length;i++) {str+= this.keylist[i] + ":" + this[this.keylist[i]].tostring () + ","; return str; } var Dragarray = new Hasharray (); /********* selected Border color ********/function selecting (obj) {if (obj.selected) Obj.style.borderColor = "lime"; else Obj.style.borderColor = "Gray"; /******* drag Encapsulation class ********/function Dragobject (obj) {this.oldx = 0; This.oldy = 0; This.isdraging = false; This.dragobj = obj; this.dragobj.style.position= "Absolute"; if (!this.dragobj.style.left) this.dragObj.style.left = 0; if (!this.dragobj.style.top) this.dragObj.style.top = 0; var theobj = this; This.zindex = 2; Obj.onmousedown = function () {Theobj.startdrag ();} Obj.onmousemove = function () {Theobj.drag ();} Obj.onmouseup = function () {Theobj.enddrag ();} This.startdrag = function () {//alert (3) dragobject.curobj = this; The currently dragged object This.isdrag = true; THIS.OLDX = Event.x; This.oldy = Event.y; This.dragObj.style.zIndex = this.zindex++; } This.enddrag = function () {This.isdrag = false; } This.drag = function () {if (This.isdrag) {var x = window.event.x; var y = window.event.y; if (Dragarray.containskey (this.dragObj.id)) {for (Var i=0;i<dragarray.keylist.length;i++) {var obj =Dragarray[dragarray.keylist[i]]; Obj.isondrag = true; Obj.style.left = parseint (Obj.style.left.replace ("px", "")) + (X-THIS.OLDX); Obj.style.top = parseint (Obj.style.top.replace ("px", "")) + (Y-this.oldy); } THIS.OLDX = x; This.oldy = y; /********* drag div********/Ismousedown = false; var originx,originy; var Isdrag = false; function Movediv (e) {if (dragobject.curobj) DragObject.curObj.drag (); if (Ismousedown &&!isdrag) {var x,y; if (document.all) {x = Event.x; y = event.y; }else{x = E.pagex; y = e.pagey; } divmove.style.display= "Block"; DivMove.style.width = Math.Abs (X-originx) + "px"; DivMove.style.height = Math.Abs (y-originy) + "px"; if (x > Originx) {divMove.style.left = originx+ "px"; }else divMove.style.left = (x-2) + "px"; if (Y > Originy) {diVMove.style.top = originy+ "px"; }else divMove.style.top = (y-2) + "px"; /********** handle MouseDown event ********/function MouseDown (e) {if (Isie) {if (event.srcElement.id = "Pa Nel ") {originx=event.x; Originy=event.y; Ismousedown=true; }else{Isdrag = true; }}else{if (e.target.id = = "Panel") {Originx=e.pagex; Originy=e.pagey; Ismousedown=true; }else{Isdrag = true; /********** processing MouseUp event ********/function MouseUp (e) {if (Isie) {if (event.srcElement.id = "Divmo VE "| | event.srcElement.id = = "Panel") {selectobjects (); Ismousedown=false; Divmove.style.display= ' None '; }else{if (dragobject.curobj) DragObject.curObj.endDrag (); Isdrag = false; }}else{if (e.target.id = = "Divmove" | | | e.target.id = = "Panel") {selectobjects (); Ismousedown=false; DivMove.style.diSplay= ' None '; }else{if (dragobject.curobj) DragObject.curObj.endDrag (); Isdrag = false; /********* selected object ********/function Selectobjects () {for (Var i=0;i<elems.length;i++) {var objx = Elems[i].offsetleft + elems[i].offsetwidth/2; var objy = elems[i].offsettop + elems[i].offsetwidth/2; if (Objx > Divmove.offsetleft && objx < Divmove.offsetleft + parseint (divMove.style.width) && Objy > Divmove.offsettop && objy < Divmove.offsettop + parseint (divMove.style.width)) {ELEMS[I].S elected = true; Dragarray.put (Elems[i].id, elems[i]); Selecting (Elems[i]); /**********id Object ********/function $ () {if (document.getElementById) {return document.getelemen Tbyid (Arguments[0]); }else{return eval (arguments[0]); } </script> <body onselectstart= "return false;" > <div id= "divmove" ></div> &LT;div id= "Panel" > <input id= "z" type= "button" value= "register" > <div id= "D" > China is a developing country </div> < /div> <script> var divmove = $ ("Divmove"); var Elems = $ ("panel"). Children; Document.onmousemove=movediv; Document.onmousedown=mousedown; Document.onmouseup=mouseup; for (Var i=0;i<elems.length;i++) {with (Elems[i]) {elems[i].dragobj = new Dragobject (elems[i)); elems[i].selected = false; Elems[i].isondrag = false; onclick = function () {if (this.selected) {if (!this.isondrag) {this.selected =!selected; Dragarray.remove (this.id); }else{This.isondrag = false; }}else if (Dragarray.isempty () | | | event.ctrlkey) {this.selected =!selected; Dragarray.put (this.id, this); } selecting (this); }} </script> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]