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:void(0)使用探讨
Aug 27 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php实现文件下载代码分享
2014/08/19 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
详解python Todo清单实战
2018/11/01 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python面向对象进阶学习
2019/05/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
大学三年的自我评价
2013/12/25 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
年会邀请函范文
2015/01/30 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android