jQuery动态添加可拖动元素完整实例(附demo源码下载)


Posted in Javascript onJune 21, 2016

本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery动态添加可拖动元素完整实例(附demo源码下载)

具体代码如下:

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程序设计有所帮助。

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 #Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 #Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
jQuery代码性能优化的10种方法
Jun 21 #Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 #Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php接口隔离原则实例分析
2019/11/11 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
详解Python3定时器任务代码
2019/09/23 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
小学生自我评价范文
2014/01/25 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
就业协议书范本
2014/04/11 职场文书
婚礼父母致辞
2015/07/28 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers