Home>

This is a javascript mouse drag and drop effect code,Learn about the trigger object with this example,Set range limits,Specify container size to lock horizontally and vertically,It also includes acquiring and releasing focus.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>Drag&Drop Effect</title>
</head>
<body>
<script>
var isie=(document.all)?true:false;
var $= function (id) {
 return "string" == typeof id?document.getelementbyid (id):id;
};
var class={
 create:function () {
  return function () {this.initialize.apply (this, arguments);}
 }
}
var extend=function (destination, source) {
 for (var property in source) {
  destination [property]=source [property];
 }
}
var bind=function (object, fun) {
 return function () {
  return fun.apply (object, arguments);
 }
}
var bindaseventlistener=function (object, fun) {
 return function (event) {
  return fun.call (object, (event || window.event));
 }
}
var currentstyle=function (element) {
 return element.currentstyle || document.defaultview.getcomputedstyle (element, null);
}
function addeventhandler (otarget, seventtype, fnhandler) {
 if (otarget.addeventlistener) {
  otarget.addeventlistener (seventtype, fnhandler, false);
 } else if (otarget.attachevent) {
  otarget.attachevent ("on" + seventtype, fnhandler);
 } else {
  otarget ["on" + seventtype]=fnhandler;
 }
};
function removeeventhandler (otarget, seventtype, fnhandler) {
 if (otarget.removeeventlistener) {
 otarget.removeeventlistener (seventtype, fnhandler, false);
 } else if (otarget.detachevent) {
 otarget.detachevent ("on" + seventtype, fnhandler);
 } else {
 otarget ["on" + seventtype]=null;
 }
};
//Drag and drop procedure
var drag=class.create ();
drag.prototype={
//Drag and drop objects
 initialize:function (drag, options) {
 this.drag=$(drag);//Drag and drop objects
 this._x=this._y=0;//Record the position of the mouse relative to the dragged object
 this._marginleft=this._margintop=0;//record margin
 //Event object (for binding removal events)
 this._fm=bindaseventlistener (this, this.move);
 this._fs=bind (this, this.stop);
 this.setoptions (options);
 this.limit=!! this.options.limit;
 this.mxleft=parseint (this.options.mxleft);
 this.mxright=parseint (this.options.mxright);
 this.mxtop=parseint (this.options.mxtop);
 this.mxbottom=parseint (this.options.mxbottom);
 this.lockx=!! this.options.lockx;
 this.locky=!! this.options.locky;
 this.lock=!! this.options.lock;
 this.onstart=this.options.onstart;
 this.onmove=this.options.onmove;
 this.onstop=this.options.onstop;
 this._handle=$(this.options.handle) || this.drag;
 this._mxcontainer=$(this.options.mxcontainer) || null;
 this.drag.style.position="absolute";
 //Transparent
 if (isie &&!! this.options.transparent) {
  //fill drag and drop objects
  with (this._handle.appendchild (document.createelement ("div")). style) {
   width=height="100%";backgroundcolor="#fff";filter="alpha (opacity:0)";
  }
 }
 //correction range
 this.repair ();
 addeventhandler (this._handle, "mousedown", bindaseventlistener (this, this.start));
 }, //Set the default properties
 setoptions:function (options) {
 this.options={//default
  handle:"", //Set trigger object (if not set, use drag and drop objects)
  limit:false, //Whether to set a range limit (the following parameters are useful when true,(Can be negative)
  mxleft:0, //left limit
  mxright:9999, //right limit
  mxtop:0, //upper limit
  mxbottom:9999, //lower limit
  mxcontainer:"", //Specify the limit in the container
  lockx:false, //whether to lock horizontal drag and drop
  locky:false, //whether to lock the vertical drag and drop
  lock:false, //whether locked
  transparent:false, //is transparent
  onstart:function () {}, //Executed when starting to move
  onmove:function () (), //execute when moving
  onstop:function () {} //execute when end of movement
 };
 extend (this.options, options || (});
 }, //ready to drag
 start:function (oevent) {
 if (this.lock) {return;}
 this.repair ();
 //Record the position of the mouse relative to the dragged object
 this._x=oevent.clientx-this.drag.offsetleft;
 this._y=oevent.clienty-this.drag.offsettop;
 //Record margin
 this._marginleft=parseint (currentstyle (this.drag) .marginleft) || 0;
 this._margintop=parseint (currentstyle (this.drag) .margintop) || 0;
 //Mousemove stops when moving mouseup
 addeventhandler (document, "mousemove", this._fm);
 addeventhandler (document, "mouseup", this._fs);
 if (isie) {
  //focus lost
  addeventhandler (this._handle, "losecapture", this._fs);
  //Set mouse capture
  this._handle.setcapture ();
 } else {
  //focus lost
  addeventhandler (window, "blur", this._fs);
  //Block the default action
  oevent.preventdefault ();
 };
 //additional program
 this.onstart ();
 }, //correction range
 repair:function () {
 if (this.limit) {
  //Fix the error range parameter
  this.mxright=math.max (this.mxright, this.mxleft + this.drag.offsetwidth);
  this.mxbottom=math.max (this.mxbottom, this.mxtop + this.drag.offsetheight);
  //If there is a container, you must set position to relative for relative positioning,And set before getting offset
  ! this._mxcontainer || currentstyle (this._mxcontainer) .position == "relative" || (this._mxcontainer.style.position="relative");
 }
 }, //drag
 move:function (oevent) {
 //Determine whether to lock
 if (this.lock) {this.stop ();return;};
 //Clear selection
 window.getselection?window.getselection (). removeallranges ():document.selection.empty ();
 //Set moving parameters
 var ileft=oevent.clientx-this._x, itop=oevent.clienty-this._y;
 //Set the range limit
 if (this.limit) {
  //Set the range parameters
  var mxleft=this.mxleft, mxright=this.mxright, mxtop=this.mxtop, mxbottom=this.mxbottom;
  //If a container is set,Re-correct range parameters
  if (!! this._mxcontainer) {
   mxleft=math.max (mxleft, 0);
   mxtop=math.max (mxtop, 0);
   mxright=math.min (mxright, this._mxcontainer.clientwidth);
   mxbottom=math.min (mxbottom, this._mxcontainer.clientheight);
  };
  //Fix the movement parameters
  ileft=math.max (math.min (ileft, mxright-this.drag.offsetwidth), mxleft);
  itop=math.max (math.min (itop, mxbottom-this.drag.offsetheight), mxtop);
 }
 //set position,And fix margin
 if (! this.lockx) {this.drag.style.left=ileft-this._marginleft + "px";}
 if (! this.locky) {this.drag.style.top=itop-this._margintop + "px";}
 //additional program
 this.onmove ();
 }, //Stop dragging
 stop:function () {
 //Remove event
 removeeventhandler (document, "mousemove", this._fm);
 removeeventhandler (document, "mouseup", this._fs);
 if (isie) {
  removeeventhandler (this._handle, "losecapture", this._fs);
  this._handle.releasecapture ();
 } else {
  removeeventhandler (window, "blur", this._fs);
 };
 //additional program
 this.onstop ();
 }
};
</script>
<style>
#idcontainer {border:10px solid #990000;width:600px;height:300px;}
#iddrag {border:5px solid #c4e3fd;background:#c4e3fd;width:50px;height:50px;top:50px;left:50px;}
#idhandle {cursor:move;height:25px;background:#0000ff;overflow:hidden;}
</style>
<div>
<div><div></div></div>
</div>
<input type="button" value="Reset" />
<input type="button" value="lock" />
<input type="button" value="lock level" />
<input type="button" value="lock vertical" />
<input type="button" value="range locked" />
<input type="button" value="cancel range lock" />
<br />Drag and drop status:<span>not started</span>
<script>
var drag=new drag ("iddrag", {mxcontainer:"idcontainer", handle:"idhandle", limit:true, onstart:function () {$("idshow"). innerhtml="Start drag and drop";}, onmove:function () {$("idshow"). innerhtml="left:" + this.drag.offsetleft + ";top:" + this.drag.offsettop;}, onstop:function () {$("idshow"). innerhtml="End drag and drop";}
});
$("idreset"). onclick=function () {
 drag.limit=true;
 drag.mxleft=drag.mxtop=0;
 drag.mxright=drag.mxbottom=9999;
 drag.lockx=drag.locky=drag.lock=false;
}
$("idlock"). onclick=function () {drag.lock=true;}
$("idlockx"). onclick=function () {drag.lockx=true;}
$("idlocky"). onclick=function () {drag.locky=true;}
$("idlimit"). onclick=function () {drag.mxright=drag.mxbottom=200;drag.limit=true;}
$("idlimitoff"). onclick=function () {drag.limit=false;}
</script>
</body>
</html>
  • Previous Daily collection and arrangement of SqlServer database optimization experience and precautions
  • Next Detailed constants and variables in Swift programming