The basic realization idea is to utilize the Onmousedown,onmouseup,onmousemove three kinds of events and the absolute positioning in CSS
Plugin Features:
1. Setting up a drag hotspot
2. Set the object to be dragged
3. Setting the Drop Range
By default, drag hotspots and dragged objects are the same element, and the drag range is the document window
jquery Code
(function($) {$.fn.drag=function(opts) {vardefaults={dragobj:$ ( This), scope:{left:0, Top:0, right:$ (document). Width (), bottom:$ (document). Height ()} } varconfig=$.extend (defaults,opts); varifmousedown=false; varOffleft; varOfftop; functiongetPosition (Element) {returnElement.offset (); } functionMousedownhandler (event) {varx=Event.pagex; vary=Event.pagey; Offleft=x-getPosition (config.dragobj). Left; Offtop=y-getPosition (config.dragobj). Top; Ifmousedown=true; } functionMousemovehandler (event) {if(Ifmousedown) {$ ( This). CSS ({"cursor": "Move"}) ; varx=Event.pagex; vary=Event.pagey; varleft=x-Offleft; vartop=y-Offtop; if(Left>config.scope.left&&left+config.dragobj.width () <config.scope.right) {Config.dragObj.css ({"Left": left+ "px"}) } if(Top>config.scope.top&&top+config.dragobj.height () <Config.scope.bottom) {Config.dragObj.css ({"Top": top+ "px"}) } } } $( This). Bind ("MouseDown", Mousedownhandler); $ (document). Bind ("MouseMove", Mousemovehandler); $ (document). Bind ("MouseUp",function() {ifmousedown=false;}); }}) (JQuery);
jquery drag-and-drop widget