JavaScript drag-and-drop effect code

Source: Internet
Author: User

Let's look at a jquery drag-and-drop effect, as long as the monitoring MouseDown and MouseMove MouseUp is OK, see the example below

The code is as follows Copy Code

<!doctype html>
<script src= "Jquery-1.3.2.min.js" ></script>
<style>
. Test{text-align:center;width:300px;height:30px;line-height:30px;background: #f60;p osition:absolute;
. Test:hover{cursor:move;}
</style>
<body>
<div class= "Test" > Drag Tests </div>
<br/><br/>
<script>
; $ (function () {
var Ismove=false;
$ (". Test"). MouseDown (function () {ismove=true;}). MouseUp (function () {ismove=false;});
$ (document). MouseMove (function (e) {
if (!ismove) {return;};
var x=e.clientx-parseint ($ (". Test"). Width ()/2);
var y=e.clienty-parseint ($ (". Test"). Height ()/2);
$ (". Test"). CSS ({"Left": X, "top": Y, "cursor": "Move"});
});
});
</script>
</body>

Example 2 using pure JS example

The code is as follows Copy Code

Code
Drag-and-drop programs
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 position of mouse relative drag-and-drop object
This._marginleft = This._margintop = 0;//record margin
Event objects (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)"; fontsize = 0;
}
}
Correction Range
This. Repair ();
addEventHandler (This._handle, "MouseDown", Bindaseventlistener (this), this. Start));
},
Set default Properties
Setoptions:function (options) {
This.options = {//default value
Handle: "",//Set Trigger object (use drag-and-drop object if not set)
limit:false,//whether a range limit is set (useful if the following parameters are true, can be negative)
mxleft:0,//left Limit
mxright:9999,//Right Limit
mxtop:0,//Top Limit
mxbottom:9999,//Bottom Limit
Mxcontainer: "",//specified limit in container
lockx:false,//whether to lock horizontal drag and drop
locky:false,//whether to lock the vertical drag-and-drop
lock:false,//is locked
transparent:false,//is transparent
Onstart:function () {},//occurs when the move starts
Onmove:function () {},//is performed while moving
Onstop:function () {}//execution when end of move
};
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 drag-and-drop 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;
Stop when moving MouseUp when MouseMove
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 default action
Oevent.preventdefault ();
};
Attaching programs
This.onstart ();
},
Correction Range
Repair:function () {
if (this. Limit) {
Correcting error range parameters
This.mxright = Math.max (this.mxright, This.mxleft + this. Drag.offsetwidth);
This.mxbottom = Math.max (This.mxbottom, This.mxtop + this. Drag.offsetheight);
If a container must be set position to relative to 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 Move parameters
var ileft = oevent.clientx-this._x, itop = oevent.clienty-this._y;
Set Scope limits
if (this. Limit) {
Set Range parameters
var mxleft = this.mxleft, Mxright = this.mxright, Mxtop = this.mxtop, mxbottom = This.mxbottom;
If the container is set, then the range parameter is corrected
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);
};
Fixed move parameters
ILeft = Math.max (Math.min (ILeft, Mxright-this. drag.offsetwidth), mxleft);
Itop = Math.max (Math.min (Itop, Mxbottom-this. drag.offsetheight), mxtop);
}
Set the location and fix the margin
if (!this. Lockx) {this. Drag.style.left = ileft-this._marginleft + "px"; }
if (!this. Locky) {this. Drag.style.top = itop-this._margintop + "px"; }
Attaching programs
This.onmove ();
},
Stop dragging
Stop:function () {
removing events
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);
};
Attaching programs
This.onstop ();
}
};

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.