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 ...
随机推荐
- webrtc初识
最近由于项目的需求,开始接触了webrtc这个东西.没想到这东西的门槛还是蛮高的,接下来分享一下我所踩过的坑,希望对以后初次接触这个东西的人有所帮助. webrtc官网 第一步当然是看官方主页了(ww ...
- Yii源码阅读笔记(三十)
Widget类是所有小部件的基类,开始,结束和渲染小部件内容的方法的注释: namespace yii\base; use Yii; use ReflectionClass; /** * Widget ...
- test hypertext links for validity, accessibility, and recent modification
https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html The HEAD method is identical to GET except th ...
- 手动删除portal中托管服务。
在portal中将server作为托管联合服务器,然后发布了托管服务.若中间取消了托管联合服务器,再重新连接,那么会出现之前的托管服务无法删除的现象. 下文为怎样手动删除这些服务的方法,(不过貌似之后 ...
- JMeter学习-040-JMeter图形化 HTML 报表概要说明
JMeter 3.0开始支持动态生成图形化 HTML dashboard报告,当前生成报告有一下两种方式: 1.脚本测试执行结束后,即生成HTML测试报告 2.通过之前生成的测试结果,生成HTML测试 ...
- AFNetworking 2.0指北
AFNetworking 2.0 来了 SEP 30TH, 2013 前几天 Mattt 发布了 AFNetworking 2.0,我的一个最大感慨就是,他怎么那么高产? 关于 Mattt Mattt ...
- sparksql---通过pyspark实现
上次在spark的一个群里面,众大神议论:dataset会取代rdd么? 大神1:听说之后的mlib都会用dataset来实现,呜呜,rdd要狗带 大神2:dataset主要是用来实现sql的,跟ml ...
- 学霸数据处理项目之数据处理网页以及后台以及C#代码部分开发者手册
写在前面,本文将详细介绍学霸数据处理项目中的数据处理网页与后台函数,以及c#代码中每一个方法的意义及其一些在运行方面需要注意的细节,供开发人员使用,开发人员在阅读相关方法说明时请参照相关代码,对于本文 ...
- Quartz2D 编程指南(二)变换、图案、阴影
概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 5.变换 简介 Quartz 2D ...
- Python之路-python(mysql介绍和安装、pymysql、ORM sqlachemy)
本节内容 1.数据库介绍 2.mysql管理 3.mysql数据类型 4.常用mysql命令 创建数据库 外键 增删改查表 5.事务 6.索引 7.python 操作mysql 8.ORM sqlac ...