这篇文章主要介绍了jQuery动态添加可拖动元素的方法,可实现简单的点击添加元素,并且添加的元素可进行拖动操作.涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
index.html：
流程设计器
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("nodesContainer"); 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 an 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("") } function move(ev){ if (dragable) { ev = ev || window.event;//如果是IE obj.style.left = (ev.clientX - posX) + "px"; obj.style.top = (ev.clientY - posY) + "px"; } } function up(){ //$(obj).unwrap(); dragable = false; }; } 完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
以上就是jQuery动态添加可拖动元素完整实例(附demo源码下载)的详细内容，更多请关注0133技术站其它相关文章！
