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那种顺滑的拖拽效果. 其实顺滑的 ...
随机推荐
- solr学习三(测试类,含普通与ExtractingRequestHandler测试)
solr客户端基本是配置出来的,服务端可以对其进行测试,我使用的是solrj服务端. 如果初学solr,先使用普通的测试类: import java.io.IOException; import ja ...
- 使用docusaurus 搭建开发&&api && 博客站点
对于日常的开发系统以及产品一个简单,方便的api&&文档网站可以七很大的作用 docusaurus 是facebook开源的文档管理框架,使用它我们可以快速的创建专业. 完备的文档站点 ...
- stenciljs 学习十 服务器端渲染
stenciljs提供了 ssr 支持,对于express 最简单的就是使用提供的中间件 express 集成 const express = require('express'); const ...
- 使用Reaction cli 创建应用
默认简单跑起来,我们可以直接使用docker,同时官方也为我们提供了cli 工具,可以快速的创建应用 安装cli npm install -g reaction-cli 初始化项目 reaction ...
- Sql语句导出数据库表结构及查询表视图储存过程名
--一句Sql把表结构全部查询出来 SELECT 表名 = Case When A.colorder=1 Then D.name Else '' End, 表说明 = Case When A.colo ...
- HIVE之 Sqoop 1.4.6 安装、hive与oracle表互导
1. sqoop数据迁移 1.1 概述 sqoop是apache旗下一款“Hadoop和关系数据库服务器之间传送数据”的工具. 导入数据:MySQL,Oracle导入数据到Hadoop的HDFS.HI ...
- 基于DRL和TORCS的自动驾驶仿真系统——之环境配置
基于DRL和TORCS的自动驾驶仿真系统 --之环境配置 玩TORCS和DRL差不多有一整年了,开始的摸爬滚打都是不断碰壁过来的,近来在参与CMU的DRL10703课程学习和翻译志愿者工作,也将自己以 ...
- 2013-7-28 802.11n帧聚合
芯片开发阶段的帧聚合迥异于商用AP,前者更偏向实现过程,后者偏向结果.也就是说用户在使用商用设备时不会管你特性是如何实现的,他们只关心效果,开启这个功能能否实实在在的提高AP的吞吐量. 网上搜索了众多 ...
- Javascript作用域学习笔记(三)
看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记: 1.javascript中的作用域和作用域链 + 每个函数在被调用时都会创建一个 ...
- RDD之四:Value型Transformation算子
处理数据类型为Value型的Transformation算子可以根据RDD变换算子的输入分区与输出分区关系分为以下几种类型: 1)输入分区与输出分区一对一型 2)输入分区与输出分区多对一型 3)输入分 ...