<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>darg</title>

<style type="text/css">

.login_title { cursor: move; position: absolute; top: 300px; left: 200px; background: #259; height: 60px; width: 500px; }

</style>

</head>

<body>

<div class="login_title" id="box"></div>

<script type="text/javascript">

function getByClass (clsName, parent) { var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for (var i = 0, l=elements.length; i<l;

	i++) { if (elements[i].className==clsName) { eles.push(elements[i]) }

	}

return eles; }

window.onload=drag;

function drag() { var oTitle=getByClass('login_title')[0]; oTitle.onmousedown=fnDown; }

function fnDown(event) { event = event || window.event; var oDrag=document.getElementById('box'), disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop;

	document.onmousemove=function(event) { event = event || window.event; fnMove(event, disX, disY); }

	document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; }

}

function fnMove(e, posx, posy) { var	oDrag=document.getElementById('box'), l=e.clientX-posx, t=e.clientY-posy, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight;

	if(l<0) { l=0; }

	else if(l>maxW) { l=maxW; }

	if(t<0) { t=10; }

	else if(t>maxH) { t=maxH; }

oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; }

</script>

</body>

</html>

知识点：

  • 用class获取元素封装;
  • 学习mouseover事件;
  • 常见拖拽bug造成原因,鼠标当前位置-元素距离浏览器的位置；
  • 超过容器大小判断；

JS拖拽事件的更多相关文章

  1. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  2. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  8. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  9. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

随机推荐

  1. hadoop job解决大数据量关联时数据倾斜的一种办法

    转自:http://www.cnblogs.com/xuxm2007/archive/2011/09/01/2161929.html http://www.geminikwok.com/2011/04 ...

  2. CentOS下的一些基础问题解答

    1. 在/etc/passwd中某一行信息为“Linux01:x:505:505:/home/linux12:/bin/bash”,由此可知哪些信息? 用户名为linux01,需要密码登陆,用户ID为 ...

  3. HttpHelper万能框架GetMergeCookie的问题

    用万能框架写了一个DZ带验证码POST登录一直错误 http://www.sufeinet.com/thread-17795-1-1.html 调试半天发现是框架GetMergeCookie的问题,, ...

  4. GC之二--GC是如何回收时的判断依据、shallow（浅） size、retained（保留） size、Deep（深）size

    回到问题“为何会内存溢出?”. 要回答这个问题又要引出另外一个话题,既什么样的对象GC才会回收? 一.对象存活方式判断方法 在上一篇文章<GC之一--GC 的算法分析.垃圾收集器.内存分配策略介 ...

  5. 【PyMongo】连接10055错误的处理--windows7

    http://stackoverflow.com/questions/25621893/mongodump-utility-raise-socketexception

  6. 查看当前mysql数据库实例中,支持的字符集有哪些,或者是否支持某个特定字符集

    需求描述: 查看当前mysql实例中支持哪些字符集,过滤特定的字符集 操作过程: 1.通过show character set来进行查看 mysql> show character set; + ...

  7. 使用mysqldump工具对数据库进行全备份

    需求描述: 通过mysqldump工具的--all-databases选项对所有数据库进行备份. 操作过程: 1.通过--all-databases选项对所有的数据库进行备份 [mysql@redha ...

  8. libui-node体验笔记

    简介 libui-node是基于libui库的node封装.libui库是一个简便的将本地原生的GUI封装的C语言库,并支持各平台(Mac,Linux,windows).官网提供了第三方封装文档,开发 ...

  9. 微信移动端（wap）开发调试工具

    为帮助开发者更方便.更安全地开发和调试基于微信的网页,微信官方推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发 ...

  10. 新唐ARM9之NUC972学习历程之系统的搭建和BSP包的使用

    说到嵌入式,我们首先想到的,就是它的复杂程度,LINUX,BSP,UBOOT,交叉编译,寄存器配置,等等一系列的问题,甚至有的时候我们对此一头雾水,很是头疼,不过我们今天要说的就是关于NUC972的一 ...