Share jquery page elements drag and drop plugin _jquery

effect: with the existing CSS style, loading plug-ins, page elements can be arbitrarily dragged in the window, set the original position translucent and drag the translucent effect options, you can choose according to need. In addition, when there are several drag-and-drop elements on the page, you can load another plug-in to set up the Z-index, simulating Windows window clicks the top effect.

Js/jquery.jldraggable.js:

;(function ($) {$.fn.extend ({"Jlzindex": function () {//z-index var $dragIndex = $ (this) for determining and setting individual dialogs);
  var arrzindex = new Array ();
   for (Var i=0 i < $dragIndex. length; i++) {//initialize array element values and set Z-index values in drag-and-drop order var zidxnum = 10000-i-i-2;
   Arrzindex[i] = {"GetId": "Drag" + ($dragIndex. length-i), "Zidx": Zidxnum};
  $ ("#drag" + ($dragIndex. length-i)). CSS ("Z-index", zidxnum);
   $dragIndex. MouseDown (function () {var i = 0;
   var dindex = 0;
   while (Arrzindex[i]) {//Find the subscript for the current click in the array (Arrzindex[i].getid = = $ (this). attr ("id")) {dindex = i;}
   i++; for (var i = Dindex I >=0; i--) {//Move the click item to the first bit of the array, the other items move back if (i > 0) {arrzindex[i].getid = Arrzindex[i-1].geti
    D
   $ ("#" + Arrzindex[i].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 plugin 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; Horizontal distance of mouse in drag area var mousetop = e.pagey-$drag. Find (". Dragbar"). Offset (). The horizontal distance of the mouse in the drag area if (model = = "Cfade") {//original position element semitransparent $drag. Clone (False). Appendto ("Body"). AddClass ("Dragshadow"). Fadeto (
   0,0.2). CSS ("Z-index", parseint ($drag. CSS ("Z-index"))-1); else if (model = = "Dfade") {//follow the mouse element semitransparent $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 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 ();
    $drag. CSS ("left", Dragleft + "px");
   $drag. CSS ("top", Dragtop + "px");
   } else{return false;
  }
   });
  });
   $ (document). MouseUp (function () {draggable = false;
   $ (". Dragshadow"). Remove (); 
   if (model = = "Dfade") {$drag. Fadeto (0,1);
  }
  });
 })}) (JQuery)

Index.html:

<script type= "Text/javascript" src= "js/jquery.min.js" ></script> <script type= "Text/javascript" Js/jquery.jldraggable.js "></script> <script type=" Text/javascript "> $ (document). Ready (function () {$ ("#drag1"). Jldraggable (); No parameters, no shadow $ ("#drag2"). Jldraggable ("Cfade"); Cfade, defines the original position semitransparent shadow $ ("#drag3"). Jldraggable ("Dfade"); Dfade, defines the translucent shadow that follows the mouse (". Dragindex"). Jlzindex ();
Z-index processing of 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 parameters </div> </div> <div id= "Drag2" class= "Dragindex" > < Div class= "Dragbar dragtitle" ></div> <div class= "Dragcontent" > in-situ translucent </div> </div> <div Id= "Drag3" class= "Dragindex" > <div class= "Dragbar dragtitle" ></div> <div class= "Dragcontent" >
 Drag Translucent </div> </div>

Wonderful feature sharing: JavaScript drag-and-drop effect jquery pull effect

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.