javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
效果图:
可以通过 https://littlehiuman.github.io/06-Dragable/index.html 查看效果。
https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~
CSS:
* {
margin:;
padding:;
} #box {
margin: 10px;
position: relative;
width: 400px;
height: 400px;
background: #ccc;
border: 1px solid #333;
} #dragBox {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
background: blue;
cursor: move;
font-size: 12px;
color: #fff;
}
HTML:
<div id="box">
<div id="dragBox">拖我</div>
</div>
JAVASCRIPT:
var VVG = {}; //命名空间
VVG.DOM = {
$: function (id) { //创建方便的选择符
return typeof id == "string" ? document.getElementById(id) : id;
},
bindEvent: function (node, type, func) { //事件绑定方法
if (node.addEventListener) {
node.addEventListener(type, func, false);
} else if (node.attachEvent) {
node.attachEvent("on" + type, func);
} else {
node["on" + type] = func;
}
},
getEvent: function (event) { //获取事件
return event ? event : window.event;
},
getTarget: function (event) { //获取事件目标
return event.target || event.srcElement;
}
}
var DragDrop = function () { //新建一个返回对象的函数
var box = VVG.DOM.$("box"); //获取外围BOX
var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX
var dragging = null; //初始化对象
function drag(event) { //事件执行函数
event = VVG.DOM.getEvent(event);
var target = VVG.DOM.getTarget(event);
switch (event.type) {//判断事件类型
case "mousedown":
if (target.id == "dragBox") { //当事件对象的ID等于要拖动的BOX的ID时
dragging = target; //赋值到拖动目标
}
break;
case "mousemove":
if (dragging) { //当有拖动目标时执行
sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth / 2) + "px";
dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight / 2) + "px";
var left = parseInt(dragging.style.left);
var top = parseInt(dragging.style.top);
//console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
// 比较坐标是否超出外围的BOX
if (left < 0) {
dragging.style.left = 0 + "px";
}
if (top < 0) {
dragging.style.top = 0 + "px";
}
if (left > box.offsetWidth - dragBox.offsetWidth) {
dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2) + "px";
}
if (top > box.offsetHeight - dragBox.offsetHeight) {
dragging.style.top = (box.offsetHeight - dragBox.offsetHeight - 2) + "px";
}
}
break;
case "mouseup":
// 清空拖动目标
dragging = null;
break;
}
};
return {
dragStart: function () {
// 绑定事件
VVG.DOM.bindEvent(document, "mousedown", drag);
VVG.DOM.bindEvent(document, "mousemove", drag);
VVG.DOM.bindEvent(document, "mouseup", drag);
}
}
}();
DragDrop.dragStart();
转自:http://www.cnblogs.com/NNUF/archive/2012/04/02/2430132.html
javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)的更多相关文章
- js 拖拽 鼠标事件,放大镜效果
设置网站播放视频 只有一个是播放的 //需要引入jquery var v = $("video") v.bind("play",function(){ for( ...
- Javascript:简单拖拽效果的实现
核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...
- JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 原生拖拽,拖放事件(drag and drop)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- [javascript]一种兼容性比较好的简单拖拽
作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文 ...
- Javascript自由拖拽类
基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
随机推荐
- [Azure Storage]使用Java上传文件到Storage并生成SAS签名
Azure官网提供了比较详细的文档,您可以参考:https://azure.microsoft.com/en-us/documentation/articles/storage-java-how-to ...
- 调试bug 技巧
两天,一个小bug 我调试了两天,最终调试成功了.还是在别人的帮助下. 问题是刷新相关的.当用户登录了,其他的页面都要刷新.也就是加上一些参数. 但是有一个fragment一直加不上,其他挨着的两个都 ...
- 容器技术Docker
什么是decker容器 简单理解就是将代码和部署环境一起打包的一个容器
- android 管理Touch事件
The onInterceptTouchEvent() method gives a parent the chance to see any touch event before its child ...
- atomic integer 实现
public final int getAndAddInt(Object o, long offset, int delta) { int v; do { v = getIntVolatile(o, ...
- 对setTimeout函数的理解
之前去面试一家公司时,面试官出了一道关于js的setTimeout函数的题目: /* *面试官给的原题目如下: *执行mytest()后,控制台输出内容是_____ *function mytest( ...
- 【Linear Models for Binary Classification】林轩田机器学习基石
首先回顾了几个Linear Model的共性:都是算出来一个score,然后做某种变化处理. 既然Linear Model有各种好处(训练时间,公式简单),那如何把Linear Regression给 ...
- TIDB介绍
TiDB 是什么? TiDB 是一个分布式 NewSQL 数据库.它支持水平弹性扩展.ACID 事务.标准 SQL.MySQL 语法和 MySQL 协议,具有数据强一致的高可用特性,是一个不仅适合 O ...
- Python编码、流程控制、格式化输出
Python编码 初始编码: 电脑的传输,还有储存,实际上都是010101010 ASCII码: (American Standard Code for Information Interchange ...
- STL之deque使用简介
deque函数列表 函数 c.assign(beg,end)c.assign(n,elem) c.at(idx) c.back() c.begin() c.clear() deque<Elem& ...