原生javascript实现拖动元素示例代码

本文介绍原生javascript实现元素拖动。

思路：

1.首先改变被拖动元素的布局属性，关键是“position:absolue”；

2.捕捉鼠标事件"mousedown","mousemove","mouseup"；

3.当触发"mousedown"时，记录下当前鼠标在元素中的相对位置，_x,_y；

4.紧接着处理"mousemove"事件，通过改变元素的top和left属性来移动元素；

5.当触发"mouseup"时间时，终止拖动。

同时，应考虑代码的封装性和浏览器的兼容性，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>draggable div</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #fff;
} 

#drag_div{
width: 150px;
height: 150px;
padding: 10px;
margin: 10px;
background-color: #66dd33;
cursor: move;
}
</style>
</head>
</html>
<body>
<div id="drag_div"></div>
</body>
<script type="text/javascript"> 

function Drag () {
this.initialize.apply(this, arguments);
} 

Drag.prototype = { 

// 初始化
initialize : function (element, options) { 

this.element = this.$(element); // 被拖动的对象
this._x = this._y = 0; // 鼠标在元素中的位置
this._moveDrag = this.bind(this, this.moveDrag);
this._stopDrag = this.bind(this, this.stopDrag); 

// 设置参数
this.setOptions(options); 

// 设置鼠标去“拖”的“柄”对象（注意与被拖动的对象区别）
this.handle = this.$(this.options.handle); 

// 设置回调函数
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop; 

this.handle.style.cursor = "move"; 

this.changeLayout(); 

// 注册开始拖动事件
this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag));
}, 

// 改变被拖动对象的布局属性
changeLayout: function () {
this.element.style.top = this.element.offsetTop + "px";
this.element.style.left = this.element.offsetLeft + "px";
this.element.style.position = "absolute";
this.element.style.margin = "0";
}, 

startDrag : function (event) {
var event = event || window.event; 

this._x = event.clientX - this.element.offsetLeft;
this._y = event.clientY - this.element.offsetTop; 

this.addHandler(document, "mousemove", this._moveDrag);
this.addHandler(document, "mouseup", this._stopDrag); 

this.preventDefault(event); 

this.handle.setCapture && this.handle.setCapture(); 

this.onStart();
},
moveDrag : function (event) {
var event = this.getEvent(event); 

var iTop = event.clientY - this._y;
var iLeft = event.clientX - this._x; 

this.element.style.top = iTop + "px";
this.element.style.left = iLeft + "px"; 

this.onMove();
},
stopDrag : function () { 

this.removeHandler(document, "mousemove", this._moveDrag);
this.removeHandler(document, "mouseup", this._stopDrag);
this.handle.releaseCapture && this.handle.releaseCapture(); 

this.onStop() 

},
setOptions : function (options) {
this.options = {
handle: this.element, //事件对象
onStart : function () {}, // 开始时回调函数
onMove : function(){}, // 拖拽时回调函数
onStop : function(){} // 停止时回调函数
};
for(var p in options){
this.options[p] = options[p];
}
},
$ : function (id) {
return typeof id === "string" ? document.getElementById(id):id;
},
addHandler : function (element, eventType, handler) {
if(element.addEventListener){
return element.addEventListener(eventType, handler, false);
}else{
return element.attachEvent("on"+eventType, handler);
}
},
removeHandler : function (element, eventType, handler) {
if(element.removeEventListener){
return element.removeEventListener(eventType, handler, false);
}else{
return element.detachEvent("on" + eventType, handler);
}
},
getEvent: function (event) {
return event || window.event;
},
preventDefault: function (event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
bind : function (obj, handler) {
return function () {
return handler.apply(obj, arguments);
}
}
}; 

window.onload = function () {
var drag_div = document.getElementById("drag_div"); 

var drag = new Drag(drag_div, {handle: drag_div});
} 

</script>
</html>
赞 (0)

相关推荐

  • javascript实现可拖动变色并关闭层窗口实例

    本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con

  • JavaScript:Div层拖动效果实例代码

    JavaScript:Div层拖动效果实例代码

    Div层拖动效果图: 实现:CSS: 复制代码 代码如下: <style>div{position:relative;}</style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){ if (event.srcElement.id.indexOf("wishbroad&q

  • javascript实现鼠标拖动改变层大小的方法

    本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

  • JavaScript实现DIV层拖动及动态增加新层的方法

    本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

  • javascript实现行拖动的方法

    本文实例讲述了javascript实现行拖动的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>行拖动</title> <script> window.onload = functi

  • 最精简的JavaScript实现鼠标拖动效果的方法

    相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • JavaScript 实现鼠标拖动元素实例代码

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现 二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制代

  • Javascript简单实现可拖动的div

    复制代码 代码如下: <html> <head> <script type="text/javascript"> var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$("px").style.pixelLeft; y=event.clientY-$("px&q

  • JavaScript模块随意拖动示例代码

    复制代码 代码如下: <!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> <meta http-equiv=&qu

  • 原生javascript实现拖动元素示例代码

    本文介绍原生javascript实现元素拖动. 思路: 1.首先改变被拖动元素的布局属性,关键是"position:absolue": 2.捕捉鼠标事件"mousedown","mousemove","mouseup": 3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y: 4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元

  • javascript实现拖动元素交换位置

    javascript实现拖动元素交换位置

    本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height

  • jQuery与原生JavaScript选择HTML元素集合用法对比分析

    本文实例讲述了jQuery与原生JavaScript选择HTML元素集合用法.分享给大家供大家参考,具体如下: 通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName(部分浏览器不支持),可以返回HTMLCollection对象.表面上,它们与数组很类似,因为它们都包含length属性并且元素都可以通过[index]方式访问.然而,实际上它们并不是数组:诸如pus

  • 利用 JavaScript 实现并发控制的示例代码

    利用 JavaScript 实现并发控制的示例代码

    一.前言   在开发过程中,有时会遇到需要控制任务并发执行数量的需求.   例如一个爬虫程序,可以通过限制其并发任务数量来降低请求频率,从而避免由于请求过于频繁被封禁问题的发生.   接下来,本文介绍如何实现一个并发控制器. 二.示例 const task = timeout => new Promise((resolve) => setTimeout(() => { resolve(timeout); }, timeout)) const taskList = [1000, 3000,

  • 分享javascript计算时间差的示例代码

    分享javascript计算时间差的示例代码

    在实际应用中,需要计算两个时间点之间的差距,一般来说都是计算当前时间和一个指定时间点之间的差距,并且有时候需要精确到天.小时.分钟和秒,下面就简单介绍一下如何实现此效果. 效果图: 距离新年: 代码如下: <html> <head> <title>javascript计算时间差</title> <style type="text/css"> #thenceThen { font-size:2em; } </style&g

  • Android未读消息拖动气泡示例代码详解(附源码)

    Android未读消息拖动气泡示例代码详解(附源码)

    前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr

  • 基于PHP实现原生增删改查的示例代码

    基于PHP实现原生增删改查的示例代码

    目录 一.代码 1.sql 2.列表页(index.php) 3.delete.php 4.update.php 5.create.php 二.效果图 一.代码 1.sql -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 2022-03-19 19:16:40 -- 服务器版本:10.1.13-MariaDB -- PHP

  • 原生JavaScript实现拖动校验功能

    本文实例为大家分享了JavaScript实现拖动校验的具体代码,供大家参考,具体内容如下 思路 1.页面布局采用定位,背景颜色变化bg的宽度为0,其宽度会随着滑块的移动而移动. 页面结构 <!--验证--> <div class="box"> <!--滑块--> <div class="btn"></div> <!--文字--> <p class="text">请

  • Javascript遍历table中的元素示例代码

    例如: <table id=tb> <tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr>&

随机推荐