jQuery動(dòng)態(tài)添加可拖動(dòng)元素完整實(shí)例(附demo源碼下載)
本文實(shí)例講述了jQuery動(dòng)態(tài)添加可拖動(dòng)元素的方法。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流程設(shè)計(jì)器</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 = "添加節(jié)點(diǎn)" 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-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("<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.top = (ev.clientY - posY) + "px"; } } function up(){ //$(obj).unwrap(); dragable = false; }; }
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery div拖動(dòng)效果示例代碼
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- 利用JQuery+EasyDrag 實(shí)現(xiàn)彈出可拖動(dòng)的Div,同時(shí)向Div傳值,然后返回Div選中的值
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jQuery 可以拖動(dòng)的div實(shí)現(xiàn)代碼 腳本之家修正版
- jQuery實(shí)現(xiàn)DIV層淡入淡出拖動(dòng)特效的方法
- jquery拖動(dòng)改變div大小
- jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能示例【拖動(dòng)div等任何標(biāo)簽】
- jquery實(shí)現(xiàn)可拖動(dòng)DIV自定義保存到數(shù)據(jù)的實(shí)例
- jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
相關(guān)文章
Jquery Ajax.ashx 高效分頁實(shí)現(xiàn)代碼
Jquery ,大家都熟悉的一個(gè)框架,我對(duì)Jquery正在學(xué)習(xí)中,對(duì)其影響最深的當(dāng)屬 它的選擇器之強(qiáng),ajax與服務(wù)器之間的交談2009-10-10JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
這篇文章主要介紹了JQuery中使文本框獲得焦點(diǎn)的方法,實(shí)例分析了jQuery針對(duì)文本框獲得焦點(diǎn)的技巧,需要的朋友可以參考下2015-02-02jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下2015-01-01jquery通過擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法
這篇文章主要介紹了jquery通過擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法,通過jQuery針對(duì)select空間增加enter及focus選擇功能分析了jQuery擴(kuò)展的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果,通過調(diào)用自定義函數(shù)實(shí)現(xiàn)頁面tab切換及字體樣式同步變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)硪黄狫Query.validate在ie8下不支持的快速解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05jquery操作select option 的代碼小結(jié)
jquery操作select option 的代碼小結(jié),需要的朋友可以參考下。2011-06-06