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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JS中Location使用详解
2015/05/12 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
深入理解Python装饰器
2016/07/27 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Django之PopUp的具体实现方法
2019/08/31 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python requests库的使用
2021/01/06 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
几个常见的软件测试问题
2016/09/07 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
致裁判员加油稿
2014/02/08 职场文书
怀念母亲教学反思
2014/04/28 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
公务员年度考核评语
2014/12/31 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
60句有关成长的名言
2019/09/04 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js