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/ ...
随机推荐
- Javascript实现浏览器菜单命令
每当我们看到别人网页上的打开.打印.前进.另存为.后退.关闭本窗口.禁用右键等实现浏览器命令的链接,而自己苦于不能实现时,是不是感到很遗憾?是不是也想实现?如果能在网页上能实现浏览器的命令,将是多么有 ...
- C++（1）C++类四个默认函数---构造函数、析构函数、拷贝函数、赋值函数
C++构造函数和析构函数 默认构造函数指不带参数或者所有参数都有缺省值的构造函数!!! (1)构造函数.析构函数与赋值函数 构造函数.析构函数与赋值函数是每个类最基本的函数.它们太普通以致让人容易麻痹 ...
- 【Java集合的详细研究3】Arrays类常用方法
1.void sort(array)对数组array的元素进行升序排序 2.int binarySearch(array,val):查询元素值val在数组array中的下标 3.String toSt ...
- mac下安装apc并且使用
1.到网站下载对应PHP版本apc压缩包http://git.php.net/?p=pecl/caching/apc.git;a=commit;h=08e2ce7ab5f59aea483d877e2b ...
- 【mysql】恢复备份
windows环境: 打开cmd cd 到备份数据目录 mysql -u*** -p use database; source *****.sql;
- select2 选择框插件
<select id="selBusi_type"><select> //初始化业务类型下拉 var initBusiTypeSel = function( ...
- 通过notepad++将混乱的xml配置的格式进行美化
需求描述: 最近在进行hbase配置文件的修改之后,发现xml文件的格式很不美观, 然后,在网上找了些方法,实测,通过notepad++的xml tools插件就可 达到美化效果. 操作过程: 1.以 ...
- Cocos2d-x3.0触摸
cocos2d-x 3.0開始採用C++11,并開始脱离OC风格,在触摸处理上也作出了改变 C++11带来了Lambda表达式(匿名函数),它将简化程序编写,可使代码更清晰易懂 在旧2.x版本号的触摸 ...
- C# string.Format("{0:C3}", 2)
- 新版本读取老版本文件崩溃BUG
读取文件匹配代码 BOOL CWBPage::LoadFromFile(CFile *pFile, LONGLONG& lOff, ULONGLONG lFileLength) { if (p ...