JS实现拖动效果
有个问题就是该模块要使用定位,因为有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实现拖动效果的更多相关文章
- JS 实现拖动效果
<html> <body style="margin:0px;"> <script src="http://ajax.googleapis. ...
- js 实现win7任务栏拖动效果
前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...
- HTML 通过js实现div的拖动效果
最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- Js 拖动效果
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- Web的鼠标拖动效果
以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...
随机推荐
- hasura graphql server 集成gatsby
hasura graphql server 社区基于gatsby-source-graphql 开发了gatsby-postgres-graphql 插件, 可以快速的开发丰富的网站 基本使用 安装h ...
- streamsets 集成 cratedb 测试
我们可以集成crate 到streamsets 中可以实现强大的数据导入,数据分析能力. 演示的是进行csv 文件的解析并输出到cratedb 环境使用docker && docker ...
- .net 拆分字符串成数数组 包含使用空格 逗号 回车 换行符等
简单的代码如下: public static string[] GetProductList(string inputstring) { char[] split ...
- 如何取出word文档里的图片
在生活当中,Word办公是必不可少的.但是在工作中也会遇到一些麻烦,比如说如何取出word文档里的图片呢?有的人会通过复制粘贴,通过画图保存,可是这种方法未免太繁琐了吧.下面我就来分享一下我的经验. ...
- MQ的不足
调用方实时依赖执行结果的业务场景,请使用调用,而不是MQ.MQ是互联网分层架构中的解耦利器,那所有通讯都使用MQ岂不是很好?这是一个严重的误区,调用与被调用的关系,是无法被MQ取代的.比如用户登录场景 ...
- 2019第1周日-MQ选型要点
用消息中间件犹如小马过河,选择合适的才最重要,这需要贴合自身的业务需求,技术服务于业务.具体在选择上可从下面功能.性能.可靠性和可用性.运维管理.社区和生态.团队技术栈等维度来进行筛选. 具体技术选型 ...
- vue-cli 下的 webpack 优化
app bundle 可以通过组件懒加载优化 vender 优化方法: 使用 cdn,然后在 webpack 配置中指定 externals. 利用 webpack 的插件 DllPlugin 和 D ...
- CentOS6.8 x64+Nginx1.3.8/Apache-httpd 2.4.3+PHP5.4.8(php-fpm)+MySQL5.5.28+CoreSeek4.1源码编译安装
系统为CentOS6.8 x64服务器版精简安装. 准备工作 部署安装目录 /usr/local/* /var/lib/* /var/lib64/* 下载源文件 #cd /usr/local/src ...
- net core 2.0学习笔记(一):开发运行环境搭建 (转)
期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...
- 洛谷2530(codevs2098)化工厂装箱员
题目:https://www.luogu.org/problemnew/show/P2530 dp或搜索. dp做法就是 当前值+1 转移到 当前某一维为0.位置前进了c位 的地方.但没写. 写了搜索 ...