开发者社区> 爱六六> 正文

一步一步理解拖拽Drag(一)

简介: 拖拽三部曲原理:     1、鼠标按下;     2、鼠标移动;     3、鼠标抬起。 View Code DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
+关注继续查看

拖拽三部曲原理:
     1、鼠标按下;
     2、鼠标移动;
     3、鼠标抬起。

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag一步一步理解拖拽</title>
<script type="text/javascript">
var base = {
getId:
function (id) {
return document.getElementById(id);
},
addEvent:
function (elem, type, fn) {
if (elem.addEventListener) {
elem.addEventListener(type, fn,
false);
}
else if (elem.attachEvent) {
elem.attachEvent(
"on" + type, fn);
}
else {
elem[
"on" + type] = fn;
}
},
removeEvent:
function (elem, type, fn) {
if (elem.removeEventListener) {
elem.removeEventListener(type, fn,
false);
}
else if (elem.detachEvent) {
elem.detachEvent(
"on" + type, fn);
}
else {
elem[
"on" + type] = null;
}
}
};

function Drag(obj) {
this.obj = obj;
var _this = this;
base.addEvent(obj,
"mousedown", function (event) {
_this.startDrap(event);
});
}

Drag.prototype
= {
startDrap:
function (event) {
var _this = this;

this.mousemoveHandle = function (event) {
_this.move();
};

this.mouseupHandle = function () {
_this.stopDrag();
};

base.addEvent(document,
"mousemove", this.mousemoveHandle);

base.addEvent(document,
"mouseup", this.mouseupHandle);

base.getId(
"mdiv").innerHTML = "鼠标被按下了";
},
move:
function () {
base.getId(
"mdiv").innerHTML = "鼠标移动中。。。。";

this.obj.style.left = event.clientX - this.obj.offsetLeft + "px";
this.obj.style.top = event.clientY - this.obj.offsetTop + "px";
},
stopDrag:
function () {
base.removeEvent(document,
"mousemove", this.mousemoveHandle);
base.removeEvent(document,
"mouseup", this.mouseupHandle);

base.getId(
"mdiv").innerHTML = "鼠标抬起了";
}
};


base.addEvent(window,
"load", function () {
var tmp = base.getId("mdiv");
var b = new Drag(tmp);
});
</script>
</head>
<body>
<div id="mdiv" style="width: 300px; height: 100px; border: 1px solid red; position: absolute">
</div>
</body>
</html>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19579 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18623 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16961 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
18523 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
11692 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
34525 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载