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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
javascript实现行拖动的方法
May 27 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
带有定位当前位置的百度地图前端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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
初识laravel5
2015/03/02 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python表格存取的方法
2018/03/07 Python
python实现汽车管理系统
2018/11/30 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
浅析使用Python搭建http服务器
2019/10/27 Python
在线课程:Skillshare
2019/04/02 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
销售实习自我鉴定
2013/12/07 职场文书
转党组织关系介绍信
2014/01/08 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL