Home > Developer > Web Develop
In some pop-up pages, the drag-and-drop effect is often used to increase the user experience and prevent some elements from being obscured by pop-up boxes. If the original JS to write, JS compatibility is very bad control, often due to the browser event is not unified and affect the effect, today to introduce a drag plugin Easydrag,easydrag can specify the area can be dragged, a sethandler, good open source is a good thing, A single line of code is easy to use on the main browser
Examples of Use methods:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>Easydrag</title>
<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.easydrag.js" ></script>
<script >
$ (document). Ready (function () {
$ ("#divPanel"). Easydrag ();
$ ("#divPanel"). SetHandler ("divtitle");
});
</script>
<body>
<form id= "Form1" runat= "Server" >
Use headings to drag and drop
<div id= "Divpanel" style= "width:300px;height:300px;background:white;border:1px solid #000000;p Osition:absolute; left:5px;top:50px ">
<div id= "divtitle" style= "Width:100%;height:25px;background:lavender" > Title</div>
<div style= "width:100%" ></div>
</div>
</form>
</body>
You can click here to download the sample
Easydrag Source code:
/**
* Easydrag 1.5-drag & Drop JQuery Plug-in
*
* Thanks for the community which is helping the improvement
* of this little piece of code.
*
* For usage instructions visit http://fromvega.com/scripts
*/
(function ($) {
To track if the mouse button is pressed
var ismousedown = false;
To track the current element being dragged
var currentelement = null;
Callback Holders
var dropcallbacks = {};
var dragcallbacks = {};
Bubbling status
var bubblings = {};
Global Position Records
var lastmousex;
var Lastmousey;
var lastelemtop;
var lastelemleft;
Track Element Dragstatus
var dragstatus = {};
If user is holding no handle or not
var holdinghandler = false;
Returns the mouse (cursor) Current position
$.getmouseposition = function (e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (E.pagex | | e.pagey) {
Posx = E.pagex;
Posy = E.pagey;
}
else if (E.clientx | | e.clienty) {
POSX = e.clientx + Document.body.scrollLeft + document.documentElement.scrollLeft;
Posy = e.clienty + Document.body.scrollTop + document.documentElement.scrollTop;
}
return {' x ': posx, ' y ': posy};
};
Updates the position of the current element being dragged
$.updateposition = function (e) {
var pos = $.getmouseposition (e);
var SpanX = (pos.x-lastmousex);
var spany = (Pos.y-lastmousey);
$ (currentelement). CSS ("Top", (Lastelemtop + spany));
$ (currentelement). CSS ("Left", (Lastelemleft + SpanX));
};
When the mouse is moved and the mouse button is pressed
$ (document). MouseMove (function (e) {
if (Ismousedown && dragstatus[currentelement.id]! = ' false ') {
Update the position and call the registered function
$.updateposition (e);
if (dragcallbacks[currentelement.id]! = undefined) {
Dragcallbacks[currentelement.id] (E, currentelement);
}
return false;
}
});
When the mouse button is released
$ (document). MouseUp (function (e) {
if (Ismousedown && dragstatus[currentelement.id]! = ' false ') {
Ismousedown = false;
if (dropcallbacks[currentelement.id]! = undefined) {
Dropcallbacks[currentelement.id] (E, currentelement);
}
return false;
}
});
Register the function to being called while a element is being dragged
$.fn.ondrag = function (callback) {
Return This.each (function () {
Dragcallbacks[this.id] = callback;
});
};
Register the function to being called when a element is dropped
$.fn.ondrop = function (callback) {
Return This.each (function () {
Dropcallbacks[this.id] = callback;
});
};
Disable the dragging feature for the element
$.fn.dragoff = function () {
Return This.each (function () {
Dragstatus[this.id] = ' off ';
});
};
Enable the dragging feature for the element
$.fn.dragon = function () {
Return This.each (function () {
Dragstatus[this.id] = ' on ';
});
};
Set a child element as a handler
$.fn.sethandler = function (Handlerid) {
Return This.each (function () {
var draggable = this;
Enable event bubbling so the user can reach the handle
Bubblings[this.id] = true;
Reset cursor Style
$ (draggable). CSS ("cursor", "");
Set Current drag status
Dragstatus[draggable.id] = "handler";
Change handle cursor Type
$ ("#" +handlerid). CSS ("cursor", "move");
Bind event Handler
$ ("#" +handlerid). MouseDown (function (e) {
Holdinghandler = true;
$ (draggable). Trigger (' MouseDown ', e);
});
Bind event Handler
$ ("#" +handlerid). MouseUp (function (e) {
Holdinghandler = false;
});
});
}
Set an element as Draggable-allowbubbling Enables/disables event bubbling
$.fn.easydrag = function (allowbubbling) {
Return This.each (function () {
If no ID is defined assign a unique one
if (undefined = = This.id | |!this.id.length) this.id = "Easydrag" + (new Date (). GetTime ());
Save Event bubbling Status
Bubblings[this.id] = allowbubbling? True:false;
Set Dragstatus
Dragstatus[this.id] = "on";
Change the mouse pointer
$ (this). CSS ("cursor", "move");
When an element receives a mouse press
$ (this). MouseDown (function (e) {
Just when "on" or "handler"
if ((dragstatus[this.id] = = "Off") | | (Dragstatus[this.id] = = "Handler" &&!holdinghandler))
return bubblings[this.id];
Set it as absolute positioned
$ (this). CSS ("position", "absolute");
Set Z-index
$ (this). CSS ("Z-index", parseint (New Date (). GetTime ()/1000));
Update track variables
Ismousedown = true;
Currentelement = this;
Retrieve positioning properties
var pos = $.getmouseposition (e);
Lastmousex = pos.x;
Lastmousey = Pos.y;
Lastelemtop = This.offsettop;
Lastelemleft = This.offsetleft;
$.updateposition (e);
return bubblings[this.id];
});
});
};
}) (JQuery);
jquery drag-and-drop plugin Easydrag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
