JQuery drag-and-drop plug-in for webpage Elements

JQuery drag-and-drop plug-in for webpage Elements

Effect Description: in combination with the existing CSS style, after loading the plug-in, the webpage elements can be dragged freely in the window, and the effect options of the original position translucent and drag translucent can be selected as needed. In addition, when there are multiple drag-and-drop elements on the page, you can load another plug-in for setting the z-index to simulate the Windows window click pin effect.

Js/jquery. jLdraggable. js:

; (Function ($) {$. fn. extend ({"jLzindex": function () {// used to determine and set the z-index var $ dragIndex =$ (this); var arrzIndex = new Array (); for (var I = 0; I <$ dragIndex. length; I ++) {// initialize the array element value, and set the z-index value var zIdxNum = 10000-I-2 in the drag-and-drop order; arrzIndex [I] = {"getId": "drag" + ($ dragIndex. length-I), "zIdx": zIdxNum}; $ ("# drag" + ($ dragIndex. length-iplus).css ("z-index", zIdxNum);} $ dragIndex. mousedown (function () {var I = 0; var dIndex = 0; while (arrzIndex [I]) {// find the subscript if (arrzIndex [I]. getId ==$ (this ). attr ("id") {dIndex = I;} I ++;} for (var I = dIndex; I> = 0; I --) {// move the click item to the first place of the array, and move other items after if (I> 0) {arrzIndex [I]. getId = arrzIndex [I-1]. getId; $ ("#" + arrzindexpolici=.getid#.css ("z-index", arrzIndex [I]. zIdx);} else {arrzIndex [I]. getId = $ (this ). attr ("id"); $ ("#" + arrzindex[ I #.getid#.css ("z-index", arrzIndex [I]. zIdx) ;}}) ;}, "jLdraggable": function (mod) {// drag the var model = mod; var draggable = false; var $ drag = $ (this); $ drag. find (". dragBar "). mousedown (function (e) {draggable = true; var mouseLeft = e. pageX-$ drag. find (". dragBar "). offset (). left; // the horizontal distance of the mouse in the drag area var mouseTop = e. pageY-$ drag. find (". dragBar "). offset (). top; // the horizontal distance between the mouse and the drag area. if (model = "cFade") {// The original position element is translucent $ drag. clone (false ). appendTo ("body "). addClass ("dragShadow" ).fadeTo(0,0.2).css ("z-index", parseint($drag.css ("z-index")-1);} else if (model = "dFade ") {// translucent $ drag. clone (false ). appendTo ("body "). addClass ("dragShadow" ).css ("z-index", parseint($drag.css ("z-index")-1); $ drag. fadeTo (0, 0.2);} $ (document ). mousemove (function (e) {if (draggable) {var winWidth = $ (window ). width (); var winHeight = $ (window ). height (); var dragLeft = e. pageX-mouseLeft; var dragTop = e. pageY-mouseTop; // The drag/drop box cannot exceed the window boundary if (dragLeft <0) {dragLeft = 0;} if (dragLeft + $ drag. width ()> winWidth) {dragLeft = winWidth-$ drag. width () ;}if (dragTop <0) {dragTop = 0 ;}if (dragTop + $ drag. height ()> winHeight) {dragTop = winHeight-$ drag. height () ;}includrag.css ("left", dragLeft + "px"); includrag.css ("top", dragTop + "px ");} else {return false ;}}) ;}; $ (document ). mouseup (function () {draggable = false; $ (". dragShadow "). remove (); if (model = "dFade") {$ drag. fadeTo () ;}}) ;}}) (jQuery)

Index.html:

<Script type = "text/javascript" src = "js/jquery. min. js "> </script> <script type =" text/javascript "src =" js/jquery. jLdraggable. js "> </script> <script type =" text/javascript "> $ (document ). ready (function () {$ ("# drag1 "). jLdraggable (); // No parameter, no shadow $ ("# drag2 "). jLdraggable ("cFade"); // cFade, defines the original position translucent shadow $ ("# drag3 "). jLdraggable ("dFade"); // dFade, defines the translucent shadow following the mouse $ (". dragIndex "). jLzindex (); // z-index processing for multiple Windows}); </script> <style type = "text/css">. dragTitle {width: 120px; height: 27px; background: url (images/drag_01.jpg); cursor: move ;}. dragContent {width: 120px; height: 73px; background: url (images/drag_02.jpg); line-height: 73px; text-align: center;} # drag1 {width: 120px; position: absolute; left: 10px; top: 10px;} # drag2 {width: 120px; position: absolute; left: 90px; top: 90px;} # drag3 {width: 120px; position: absolute; left: 170px; top: 170px ;} </style> <div id = "drag1" class = "dragIndex"> <div class = "dragBar dragTitle"> </div> <div class = "dragContent"> NO Parameter </div> <div id = "drag2" class = "dragIndex"> <div class = "dragBar dragTitle"> </div> <div class = "dragContent ""> In-situ translucent </div> <div id =" drag3 "class =" dragIndex "> <div class =" dragBar dragTitle "> </div> <div class = "dragContent"> drag and drop translucent </div>