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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript 事件系统
Jul 22 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript解析json实例详解
Nov 05 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
vue组件实现进度条效果
Jun 06 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python logging模块学习笔记
2014/05/24 Python
详解Python中的条件判断语句
2015/05/14 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python