一个超简单的JS拖拽实现代码(兼容IE,Firefox)

runcode

/**
*取得元素的真实css属性
*@param {Object} d 元素
*@param {String} a 元素的css属性名
*@version 0.2
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
/**
* 取得鼠标坐标
* @return Position
*/
function getMouseLocation(e){
if(!document.all){
mouseX = e.pageX;
mouseY = e.pageY;
}
else{
mouseX = event.x + document.body.scrollLeft;
mouseY = event.y + document.body.scrollTop;
}
return {x:mouseX,y:mouseY};
}
/**
* 拖动对象
* @param {DOM Object} DOM对象
*/
function drag(e,obj){
var p1 = getMouseLocation(e);
var startRight = null;
var startTop = null;
var startLeft = null;
var startBottom = null;
var l = gs(obj,"left");
var r = gs(obj,"right");
var t = gs(obj,"top");
var b = gs(obj,"bottom");
if(!l)
startRight = parseInt(r);
else
startLeft = parseInt(l);
if(!t)
startBottom = parseInt(b);
else
startTop = parseInt(t);
if(obj.setCapture)
obj.setCapture();
else if (window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.onmousemove = function(e){
var p2 = getMouseLocation(e);
var xMove = p2.x-p1.x;
var yMove = p2.y-p1.y;
if(!l)
obj.style.right = (startRight - xMove)+"px";
else
obj.style.left = (startLeft + xMove)+"px";
if(!t)
obj.style.bottom = (startBottom - yMove)+"px";
else
obj.style.top = (startTop + yMove)+"px";
}
document.onmouseup = function(){
if(obj.releaseCapture)
obj.releaseCapture();
else if (window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.onmouseup = null;
document.onmousemove = null;
}
}

div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;}

拖我拖我拖我拖我拖我拖我拖我

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

javascript支持firefox,ie7页面布局拖拽效果代码

您可能感兴趣的文章:

  • JS拖拽的进一步练习，移动与拉伸实现代码
  • 工作需要写的一个js拖拽组件
  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]
  • 一个js拖拽的效果类和dom-drag.js浅析
  • 原生js拖拽(第一课 未兼容)拖拽思路

Tags：JS 拖拽

相关文章

  • 2014-02-02javascript删除数组元素并且数组长度减小的简单实例
  • 2017-03-03Bootstrap入门教程一Hello Bootstrap初识
  • 2016-08-08模拟javascript中的sort排序(简单实例)
  • 2016-08-08JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
  • 2017-02-02深入理解JavaScript中的for循环
  • 2017-02-02js中创建对象的几种方式
  • 2016-09-09前端弹出对话框 js实现ajax交互
  • 2015-05-05javascript实时显示当天日期的方法
  • 2009-06-06使弱类型的语言JavaScript变强势
  • 2017-05-05bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

最新评论

赞 (0)

相关推荐

  • 一个js拖拽的效果类和dom-drag.js浅析

    这是个功能非常简单的类,只实现了拖拽的功能,当然,代码也因此保持了原始的简洁,下面是这个类库的代码: 代码 复制代码 代码如下: /************************************************** * Drag.js * 作者:橡树小屋 07.17.2010 * http://www.cnblogs.com/babyzone2004/ *用法:Drag.initDrag(id); id是标签的id名称 *****************************

  • JS拖拽的进一步练习，移动与拉伸实现代码

    直接在本地是支持IE6的,有个问题就是,鼠标点击的时候光标会变为选择文字的光标,不知道应该怎么处理这个问题呢? 在此记录一下代码: 简单拖拽扩展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200p

  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]

    关于js拖拽上传 [一个拖拽上传修改头像的流程]

    如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage

  • 原生js拖拽(第一课 未兼容)拖拽思路

    复制代码 代码如下: /* 拖拽流程: 1.第一步点击需要拖动的元素 2.在点击下的元素被选中,进行move移动 3.当鼠标弹起的时候,停止动作 4.点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document */ oDIV = document.getElementById("gaga"); oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候 var diffX = e.clie

  • 工作需要写的一个js拖拽组件

    复制代码 代码如下: /* *使用方法: * var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200}); * d.ready(); *请注意: * 拖动对象的left和top样式必须写在其style属性里边 * */ //矫正调用者.将 fn 作为 newObj 的方法调用 function repairCaller(newObj, fn){ return function(){ return fn.apply(newObj, argu

  • 一个超简单的JS拖拽实现代码(兼容IE,Firefox)

    runcode /** *取得元素的真实css属性 *@param {Object} d 元素 *@param {String} a 元素的css属性名 *@version 0.2 */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } /

  • javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

    mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p

  • 原生js拖拽实现图形伸缩效果

    原生js拖拽实现图形伸缩效果

    本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码,供大家参考,具体内容如下 点击矩形的四个角和四个边实现不同的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • js 禁止选择功能实现代码(兼容IE/Firefox)

    ie,chrome可能通过JS的onselectstart 例如 复制代码 代码如下: <body onselectstart="return false"> firefox可以通过CSS 复制代码 代码如下: *{ -moz-user-select:none }

  • asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序

    asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序

    数据库表中有一个单位表,里面包括ID.Name.Order等字段,现在有个后台管理功能,可以设置这些单位在某些统计表格中的先后显示顺序,于是想到用拖拽方式实现,这样操作起来更简便. 使用了GifCam软件做了一个示例动画,效果如下图所示: 于是就动手起来,发现jquery.ui中提供sortable函数,可用于排序,界面中从数据库绑定的单位使用Repeater控件,下面简单介绍下主要步骤: 1.项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载,

  • 一个超简单的jQuery回调函数例子(分享)

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先弹出对话框再隐藏内容, 然后再隐藏指定内容. 这显然不是我们想要的效果, 如果使用回调函数,就可以解决这个问题. 当然,回调函数功能远不只这么简单-- 具体的代码如下: <%@ page language="java" import="java.util.*" p

  • Jetpack Compose 双指拖拽实现详解

    Jetpack Compose 双指拖拽实现详解

    目录 Modifier.offset graphicsLayer Modifier.pointerInput PointerInputScope.detectTransformGestures 逻辑解释 定义4个变量 传入graphicsLayer里面 监听手势 完整代码 效果图 Modifier.offset Compose遇到一个浏览图片的功能,双指放大和缩小 Modifier的offset可以偏移内容.偏移量可以是正的,也可以是非正的.应用偏移只会更改内容的位置,而不会影响其大小测量. o

  • python3使用pyqt5制作一个超简单浏览器的实例

    我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webview.load(Qurl('http://www.cnblogs.com/Blaxon/')) webview.show() 完整代码(代码是拿的别的代码改得): from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.Q

  • 完美的js div拖拽实例代码

    本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • js实现超简单的展开、折叠目录代码

    js实现超简单的展开、折叠目录代码

    本文实例讲述了js实现超简单的展开.折叠目录代码.分享给大家供大家参考.具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下: <title>可折叠展开的简单目录</title> <style> div{

随机推荐