js 页面模块自由拖动实例

js页面模块自由拖动

.removableObj
{
height:25;position:relative;
}

var beginMoving=false;
var sourceObj=null;
var objectObj=null;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",10);
}
function MouseOverFun(obj)
{
objectObj=obj;
}
function swapFun()
{
if(sourceObj!=null && objectObj!=null )
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}

用鼠标移动TD(本代码也适合用鼠标进行其它对象的对换（如table,div等）)

a1 a2
b1 b2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js 页面模块自由拖动实例

    js页面模块自由拖动 .removableObj { height:25;position:relative; } var beginMoving=false; var sourceObj=null; var objectObj=null; function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true;

  • JS实现容器模块左右拖动效果

    JS实现容器模块左右拖动效果

    本文实例为大家分享了JS实现容器模块左右拖动效果的具体代码,供大家参考,具体内容如下 实际效果是 鼠标点击上方颜色模块,左右拖动,根据拖动的距离来显示模块 一共有7个颜色块 代码如下 CSS #box { /*margin: 0 auto;*/ width: 1750px; border: 1px solid black; display: block; position: relative; left: 0; } #box>div { width: 250px; height: 50px; d

  • js禁止浏览器页面后退功能的实例(推荐)

    实例如下所示: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); }

  • JS获取当前页面名称的简单实例

    JS获取当前页面名称的简单实例 // 取当前页面名称(不带后缀名) function pageName() { var a = location.href; var b = a.split("/"); var c = b.slice(b.length-1, b.length).toString(String).split("."); return c.slice(0, 1); } //取当前页面名称(带后缀名) function pageName() { var s

  • JS 封装父页面子页面交互接口的实例代码

    定义标准接口 Interface= {}; Interface.ParentWin = {}; Interface.ChildWin = {}; /** * 父页面提供的标准接口函数名称 */ Interface.ParentWin.funName = { getDataFun: "getDataFun", //子页面调用,提供给子页面的数据接口 updateDataFun: "updateDataFun", //子页面调用,向父页面提交数据接口 closeFun:

  • Node.js JSON模块用法实例分析

    本文实例讲述了Node.js JSON模块用法.分享给大家供大家参考,具体如下: 一.JSON.stringify语法: JSON.stringify(value [, replacer] [, space]) value:是必选字段.就是你输入的对象,比如数组,类等. replacer(可选参数):它又分为2种方式,一种是数组,第二种是方法. (1)replacer为数组时,表示的是Key,只有在类中有出现过的Key的键值对(Key-Value)才会在转化的结果中出现. replacer数组仅

  • Node.js Buffer模块功能及常用方法实例分析

    本文实例讲述了Node.js Buffer模块功能及常用方法.分享给大家供大家参考,具体如下: Buffer模块 alloc()方法 alloc(size,fill,encoding)可以分配一个大小为 size 字节的新建的 Buffer,size默认为0 var buf = Buffer.alloc(10); 参数fill为填充的数据,只要指定了fill就会调用Buffer.fill(fill) 初始化这个Buffer对象 var buf = Buffer.alloc(10,0xff);//

  • nodejs 使用 js 模块的方法实例详解

    Intro# 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这里就不做详细介绍了. node 小白,开始的时候有点懵逼,模块导出也不会. 官方文档上说支持 *.mjs 但是还要改文件扩展名,感觉有点怪怪的,就没用,主要是基于js的模块使用. 模块导出的两种方式# 因为对 C# 比较熟悉,从我对 C# 的理解中,将 nodejs 中模块导出分成两种形式: 1.一个要实例化才能调用的模块 2.

  • Node.js Domain 模块实例详解

    Node.js Domain(域) 简化异步代码的异常处理,可以捕捉处理try catch无法捕捉的异常. Domain 模块可分为隐式绑定和显式绑定: 隐式绑定: 把在domain上下文中定义的变量,自动绑定到domain对象 显式绑定: 把不是在domain上下文中定义的变量,以代码的方式绑定到domain对象 创建domain.js,代码如下: var eventEmitter=require("events").EventEmitter; var domain=require(

  • JS如何实现页面截屏功能实例代码

    "页面截屏"是前端经常遇到的需求,比如页面生成海报,弹窗图片分享等,因为浏览器没有原生的截图API,所以需要借助canvas来实现导出图片实现需求. 可行性方案 方案1: 将 DOM 改写成 canvas ,调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器 方案2: 使用第三方库html2canvas.js实现 canvas , 在不更改页面已有DOM的情况下优雅生产canvas 解决方案的选择 方案1:需要手动计算每个DOM元素的Computed St

随机推荐