jQuery动态添加可拖动元素完整实例(附demo源码下载)
本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
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>流程设计器</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-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;
};
}
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery拖动层效果插件用法实例分析(附demo源码)
本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l
-
使用jQuery的easydrag插件实现可拖动的DIV弹出框
EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置
-
jQuery实现简单的DIV拖动效果
本文实例讲述了jQuery实现简单的DIV拖动效果.分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
-
jQuery拖动元素并对元素进行重新排序
本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check
-
jQuery实现移动端滑块拖动选择数字效果
本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"
-
jQuery实现拖动效果的实例代码
jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">
-
jQuery实现div随意拖动的实例代码(通用代码)
注意js放的位置,要放的靠近,若被其他覆盖,则无法移动. 比如: <div id="move">可移动的DIV</div> 引入jquery.js, jquery-ui.js, <script scr="http://code.jquery.com/jquery-1.10.2.js"></script> <script scr="http://code.jquery.com/ui/1.11.4/jque
-
jQuery动态添加可拖动元素完整实例(附demo源码下载)
本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 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&
-
jquery拖拽效果完整实例(附demo源码下载)
本文实例讲述了jquery实现的拖拽效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: html部分: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="
-
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大
-
JS密码生成与强度检测完整实例(附demo源码下载)
本文实例讲述了JS密码生成与强度检测的方法.分享给大家供大家参考,具体如下: 1. 生成强密码 截图如下: 相关代码如下: function getPwd(n) { var s = ''; while(n--) s += String.fromCharCode(33 + Math.floor(Math.random()*(126-33))) document.getElementById('txt1').value = s; } 2. 计算密码破解时间 截图如下: 相关代码如下: functio
-
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
-
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
本文实例讲述了jQuery控制li上下循环滚动插件用法.分享给大家供大家参考,具体如下: /** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 显示li行数 * scrollNum 每次滚动li行数 * scrollTime 滚动速度 单位毫秒 * */ (function($){ var status = false; $.fn.scrollQ
-
jQuery实现对无序列表的排序功能(附demo源码下载)
本文实例讲述了jQuery实现对无序列表的排序功能.分享给大家供大家参考,具体如下: 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于j
-
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片,分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
-
jQuery实现的超链接提示效果示例【附demo源码下载】
本文实例讲述了jQuery实现的超链接提示效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style type="text/css"&g
-
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x