jQuery动态添加可拖动元素完整实例(附demo源码下载
网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了jQuery动态添加可拖动元素的方法,可实现简单的点击添加元素,并且添加的元素可进行拖动操作.涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://.w3./TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流程设计器</title> <script type = "text/javascript" src = "jquery-1.7.2.min.js"> </script> <script type = "text/javascript" src="drag.js"></script> <link type = "text/css" href = "ProcessDesigner.css" rel="stylesheet"></link> </head> <body> <div id = "console"> <div id = "menubar"> <input type = "button" value = "添加节点" hidefocus = "true" id = "addItem"/> </div> <div id = "nodesContainer"></div> </div> </body> </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-: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 = document.getElementById("nodesContainer").offsetTop+10; var newNode = document.createElement("div"); newNode.style.position = "absolute"; newNode.style.width = "20px"; newNode.style.height = "20px"; newNode.style. = +"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. = 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>") } function move(ev){ if (dragable) { ev = ev || window.event;//如果是IE obj.style.left = (ev.clientX - posX) + "px"; obj.style. = (ev.clientY - posY) + "px"; } } function up(){ //$(obj).unwrap(); dragable = false; }; }
完整实例代码点击此处。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程