Js 拖动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>js拖拽效果</title>
<style type="text/css">
#div1 {
width : 200px;
height: 200px;
position: absolute;
background: #99dd33;
cursor: move;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
window.onload = function() {
var disX = disY = 0; // 鼠标距离div的左距离和上距离
var div1 = document.getElementById("div1"); // 得到div1对象 // 鼠标按下div1时
div1.onmousedown = function(e) {
var evnt = e || event; // 得到鼠标事件
disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left
disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top // 鼠标移动时
document.onmousemove = function(e) {
var evnt = e || event;
var x = evnt.clientX - disX;
var y = evnt.clientY - disY;
var window_width = document.documentElement.clientWidth - div1.offsetWidth;
var window_height = document.documentElement.clientHeight - div1.offsetHeight; x = ( x < 0 ) ? 0 : x; // 当div1到窗口最左边时
x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时
y = ( y < 0 ) ? 0 : y; // 当div1到窗口最上边时
y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时 div1.style.left = x + "px";
div1.style.top = y + "px";
}; // 鼠标抬起时
document.onmouseup = function() {
document.onmousemove =null;
document.onmouup = null;
}; return false;
};
};
</script>
</html>
Js 拖动效果的更多相关文章
- js 实现win7任务栏拖动效果
前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...
- HTML 通过js实现div的拖动效果
最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- Web的鼠标拖动效果
以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...
- Web组件流畅拖动效果
拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...
- bootstrap使用之多个弹窗和拖动效果[开发篇]
有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触 ...
- 一行代码轻松实现拖动效果[JQuery]
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果. $(document ...
随机推荐
- Linux下搭建Windows KMS服务器
这几天微软发布了Windows 10 RedStone 1 Build 14390, 于是我第一时间下载进行了试用.和之前那种不激活也没有任何异样不同,现在的版本如果不激活有些功能就受限了,比如你无法 ...
- 合并多个工作薄workbooks到一个工作薄workbook
微软示例教程 微软示例教程 Sub MergeAllWorkbooks() Dim SummarySheet As Worksheet Dim FolderPath As String Dim NRo ...
- FMDB简单封装和使用
工具:火狐浏览器+SQLite Manager插件 ; Xcode; FMDB库; 效果: 项目地址: https://github.com/sven713/PackFMDB 主要参考这两篇博客: 1 ...
- sql server 存储过程 以及java如何使用存储过程
Sql 语句 有一个test_table1表 他有两个字段 ID 和name proc是procedure的缩写 也就是存储过程,StuProc2为创建的存储过程名称 执行以下创建存储后会在Sql ...
- Urimoo做试卷
Urimoo做试卷 题目描述 SBJ最近收到了n张数学卷子,这些卷子的标号为0-n−1,他不想写这些卷子,于是他的好朋友SCX热心地想要帮他撕掉n−1张卷子.SBJ很高兴,但是SCX说,他撕试卷的顺序 ...
- centos6.7安装Redis
1.创建安装目录 mkdir /usr/local/redis cd /usr/local/src 2.获取安装包:wget http://download.redis.io/releases/red ...
- django--主要部分
django URL URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个U ...
- HTTP常见头域
近期没需求,也没什么心情去看书,就总结一下自己以前看的HTTP协议基础内容吧.(会很乱,可能不适合一点都没接触过HTTP协议的人观看) 一.HTTP Request header 1.Cache头域 ...
- Linux下browser-sync无法启动Chrome的解决方法
笔者的环境: OS: Ubuntu Linux Browser: Chrome, Firefox 每次希望启动chrome浏览器,系统都会报错: browser-sync start -s --dir ...
- LeetCode Minimum Moves to Equal Array Elements II
原题链接在这里:https://leetcode.com/problems/minimum-moves-to-equal-array-elements-ii/ 题目: Given a non-empt ...