有个问题就是该模块要使用定位,因为有left,top属性使用,绝对定位和相对定位都行,当然你也可使用margin-left,和margin-top这2个属性,替换left,top也是可以得

这样就不用定位,仅供参考

#move{width: 300px;height: 300px;border: 1px solid red;position: absolute;top: 0px;left: 0px;background: #ccc;}
    move();
function move(){
var $move = document.getElementById('move');
var params = {
flg:false,//是否点击
left:,//模块初始位置
top:,
currentX:,//模块在屏幕中的位置
currentY:
}
//初始化的时候获取模块的位置
params.left = getCss($move,'left');
params.top = getCss($move,'top');
$move.onmousedown=function(e){
//获取鼠标在屏幕中点下的位置
params.flg = true;
var e = e || window.event;
params.currentX = e.clientX;
params.currentY = e.clientY;
}
//移动
$move.onmousemove=function(e){
if(params.flg) {
var e = e || window.event;
//当前在屏幕中的位置,减去开始在屏幕中的位置就等于移动的距离
var disX = e.clientX - params.currentX;
var disY = e.clientY - params.currentY;
//初始位置加上移动距离,就是当前位置
$move.style.left = parseInt(params.left)+ disX + "px";
$move.style.top = parseInt(params.top)+ disY + "px";
}
}
//移动结束
$move.onmouseup=function(){
//鼠标离开重新获取位置
params.flg = false;
params.left = getCss($move,'left');
params.top = getCss($move,'top');
}
//获取最终样式
function getCss(ele,key){
return ele.currentStyle ? ele.currentStyle[key]
:document.defaultView.getComputedStyle(ele,null)[key];
};
}

JS实现拖动效果的更多相关文章

  1. JS 实现拖动效果

    <html> <body style="margin:0px;"> <script src="http://ajax.googleapis. ...

  2. js 实现win7任务栏拖动效果

    前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...

  3. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  4. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  5. Js 拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  6. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  9. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

随机推荐

  1. 【HAOI2013】花卉节

    HA果然是弱省中的弱省…… 原题: ZZ市准备在绿博园举办一次花卉节.Dr.Kong接受到一个任务,要买一批花卉进行布置园林.能投入买花卉的资金只有B元 (1 <= B <= 10^18) ...

  2. HDU5373 The shortest problem (YY)

    http://acm.hdu.edu.cn/showproblem.php?pid=5373 YY题,模拟下计算过程就好了,计算中并不要保存实际数(这个数会非常大),只要保存到目前为止的数字位上的和 ...

  3. Linux 下V4l2摄像头采集图片,实现yuyv转RGB,RGB转BMP,RGB伸缩,jpeglib 库实现压缩RGB到内存中,JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  4. js搞定网页的简繁转换

    对网页进行简繁字体转换的方法一般有两种:一是使用<简繁通>这样的专业软件,另外一种是制作两套版本的网页.显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间.笔者在这里给大家提供 ...

  5. Ionic 3 自定义组件的使用

    1. 创建组件 ionic g component myComponent myComponent为组件名称 创建好后,生成的文件如下图 2. 在Page 中使用 使用的是home 在home.htm ...

  6. Oracle RAC的机制与测试方法

    Oracle RAC的机制与测试方法 标签: rac 机制 测试 2016-05-25 09:54 1150人阅读 评论(0) 收藏 举报  分类: oracle(2)  1.RAC原理 Oracle ...

  7. bisect维持已排序的序列

    如下: import bisect # 用来处理已排序的序列,用来维持已排序的序列,升序 # 基于二分查找 li = [] bisect.insort(li, 2) bisect.insort(li, ...

  8. winform截屏

    引自 http://www.cnblogs.com/aland-liu/archive/2011/07/20/Winform.html 已经注册博客好久,一直由于工作原因没有打理.今天在网上看了一个截 ...

  9. mysql 按照 where in 排序

    select * from user_extend where `unique` in('mark.liu@xxxx.com','jason.gan@xxxx.com','ssgao@xxxx.com ...

  10. Linux下分析磁盘镜像

    我们知道Windows下可以使用WinHex分析磁盘镜像:Linux下可以使用losetup工具.假如我们有一个磁盘镜像disk.img: ## 首先你的系统要支持loop device ## 一般发 ...