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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
详解javascript函数的参数
2015/11/10 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
解决uWSGI的编码问题详解
2017/03/24 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
总经理秘书工作职责
2013/12/26 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
会议邀请书范文
2014/02/02 职场文书
青蓝工程实施方案
2014/03/27 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
2016年寒假见闻
2015/10/10 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python