当前位置: 首页 > 编程笔记 >

jQuery动态添加可拖动元素完整实例(附demo源码下载)

杜炫明
2023-03-14
本文向大家介绍jQuery动态添加可拖动元素完整实例(附demo源码下载),包括了jQuery动态添加可拖动元素完整实例(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

具体代码如下:

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相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery动态添加及删除表单上传元素的方法(附demo源码下载),包括了jQuery动态添加及删除表单上传元素的方法(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery动态添加及删除表单上传元素的方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果。 具体代码如下: 完整实例代码点击此处本站下载。 希望本文所述对

  • 本文向大家介绍jQuery抛物线运动实现方法(附完整demo源码下载),包括了jQuery抛物线运动实现方法(附完整demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery抛物线运动实现方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果。 完整实例代码点击此处本站下载。 具体代码如下: 更多关于JavaScript运动效果相关内容可查

  • 本文向大家介绍jQuery实现的表头固定效果实例【附完整demo源码下载】,包括了jQuery实现的表头固定效果实例【附完整demo源码下载】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体实现步骤如下: 一、新建一js文件jQuery_FixedTableHead.js 内容如下: 二、Html实例

  • 本文向大家介绍JS密码生成与强度检测完整实例(附demo源码下载),包括了JS密码生成与强度检测完整实例(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS密码生成与强度检测的方法。分享给大家供大家参考,具体如下: 1. 生成强密码 截图如下: 相关代码如下: 2. 计算密码破解时间 截图如下: 相关代码如下: 3. 密码安全检测 截图如下: 相关代码如下: 4. 检

  • 问题内容: 我的要求是,当用户在可能也会动态添加的输入字段之一中输入一些字符(最少3个)时,显示几个选项。 由于数据量巨大,我一开始无法在页面加载时加载数据。有一个ajax调用来获取经过过滤的数据。 我得到的问题是第2行的页面加载错误。那么,请问以下代码有什么问题吗? 问题答案: 如何使用另一种方法:创建输入时初始化自动完成功能: jsFiddle与AJAX

  • 本文向大家介绍jQuery动画显示和隐藏效果实例演示(附demo源码下载),包括了jQuery动画显示和隐藏效果实例演示(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery动画显示和隐藏效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示。 完整实例代码点击此处本站下载。 具体代码如下: 希望本文所述对大家jQuery程序设计有所帮