jquery Dynamic Add a complete instance of the Drag element (with demo source download) _jquery

The examples in this article describe how jquery dynamically adds a drag element. Share to everyone for your reference, specific as follows:

The screenshot of the running effect is as follows:

The specific code is as follows:

Index.html:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"Http://www.w3.org/TR/html4/strict.dtd" >
 
 

PROCESSDESIGNER.CSS:

body {
 padding:0;
 margin:0
}
#console {
 width:500px;
 height:300px;
 Background: #eee;
 margin:10px Auto;
 border:5px solid #000;
}
#menubar {
 width:100%;
 height:30px;
 Background: #333;
 line-height:30px;
 Vertical-align:middle;
}
#addItem {
 wdith:50px;
 height:20px;
 Color: #fff;
 Background: #555;
 border:0;
 line-height:20px;
 margin-left:5px;
 border-radius:5px;
 _margin-top:4px;
}
#nodesContainer {
 width:100%;
 height:270px;
 Background: #eee;
}

Drag.js:

/** * @author Administrator * * (function () {$ ("#addItem"). Click (function () {var obj = document.getElementById ("Nodes
 Container ");
 CreateNode (obj);
 }) function CreateNode (parentnode) {var left = document.getElementById ("Nodescontainer"). offsetleft+10;
 var top = document.getElementById ("Nodescontainer"). offsettop+10;
 var newNode = document.createelement ("div");
 NewNode.style.position = "absolute";
 NewNode.style.width = "20px";
 NewNode.style.height = "20px";
 NewNode.style.top = top+ "px";
 NewNode.style.left = left+ "px";
 NewNode.style.borderRadius = "50px";
 NewNode.style.background = "Blue";
 Parentnode.appendchild (NewNode);
Dodrag (NewNode);
 /* * @param {Object} obj:if obj is a string,convert it to a obj;
 * @param {Number} initwidth:initial Width of obj;
 * @param {Number} initheight:initial Height of obj;
 * @param {Number} initleft:initial left of obj;
 * @param {Number} inittop:initial top of obj; */function Dodrag (obj, Initwidth, Initheight, Initleft, InittOP) {var posx;
  var posy;
  var dragable;
  if (typeof obj = = "string") obj = document.getElementById (obj);
  if (initwidth) obj.style.width = initwidth + "px";
  if (initheight) obj.style.height = initheight + "px";
  if (initleft) Obj.style.left = initleft + "px";
  if (inittop) obj.style.top = inittop + "px";
  Obj.onmousedown = function (event) {Down (event);
  } obj.onmouseup = function () {up ();
    function Down (e) {e = e | | window.event; Posx = E.clientx-obj.offsetleft;
    Offsetleft is a readonly property posy = E.clienty-obj.offsettop;
    Dragable = true;
 Document.onmousemove = move; $ (obj). Wrap ("<div style = ' position:relative;border:1px solid red;width:300px;height:50px ' ></div>")} F Unction Move (EV) {if (dragable) {ev = EV | | window.event;//if it is ie Obj.style.left = (EV.CLIENTX-POSX) + "
      PX ";
    Obj.style.top = (ev.clienty-posy) + "px";
    } function up () {//$ (obj). Unwrap ();
  Dragable = false; };

 }

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site: "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", " jquery Extended Skills Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.