JS实现拖拽效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖拽效果</title>
<style>
#div1 {width:200px; height:200px; background:blue; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JS实现拖拽效果的更多相关文章
- js 鼠标拖拽效果实现
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- js基础拖拽效果
function drag(ele) { const config = { mark: 0, x: 0, y: 0, left: ele.offsetLeft, top: ele.offsetTop, ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- spark学习系列
转自: http://www.cnblogs.com/magj2006/p/4316264.html spark 系列文章汇总 源码导读 spark 源码导读1 从spark启动脚本开始 spark ...
- socket和http
套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...
- fbset
fbset用于读取和设置framebuffer的参数. # fbset mode "800x480-112" # D: 64.998 MHz, H: 58.034 kHz, V: ...
- e665. 在图像中过滤三元色
This example demonstrates how to create a filter that can modify any of the RGB pixel values in an i ...
- c++ ++i and i++
++i 在 i 存储的值上增加一并向使用它的表达式 ``返回" 新的, 增加后的值; 而 i++ 对 i 增加一, 但返回原来的是未增加的值. 至于++i和i++有什么区别,举个例子 1.a ...
- 记录下自己常用的全框架HTML代码
纯粹记录下,没有任何意义. 也不推荐使用 <frameset rows="> <frame src=" name="topFrame" scr ...
- mongodb启动时报错ERROR: child process failed, exited with error number 1
不多说,直接上干货! 前期博客 Ubuntu14.04下Mongodb安装部署步骤(图文详解) Ubuntu16.04下Mongodb安装部署步骤(图文详解) root@zhouls-virtual- ...
- easyui------设置datagrid('getEditor')时焦点问题
代码: var dg = $(DataGrid.TableGridID); var row = { ID: "", UserName: "", Password ...
- day25<多线程+&设计模式&GUI>
多线程(单例设计模式)(掌握) 多线程(Runtime类) 多线程(Timer)(掌握) 多线程(两个线程间的通信)(掌握) 多线程(三个或三个以上间的线程通信) 多线程(线程间的通信注意的问题) 多 ...
- rpm源码安装mysql
1)访问官网(mysql社区服务器) http://downloads.mysql.com/archives/community/ 2)选择自己需要的版本和对应服务器(例如 服务器是centos 6. ...