原生js拖拽特效

最新推荐文章于 2022-04-27 13:41:56 发布

狼丶宇先森

最新推荐文章于 2022-04-27 13:41:56 发布

阅读量340

点赞数

分类专栏：前端 javascript 文章标签：拖拽特效原生js 前端 javascriptt 特效

本文链接：https://blog.csdn.net/qq_33270001/article/details/81809413

版权

前端同时被 2 个专栏收录

82 篇文章 2 订阅

订阅专栏

javascript

66 篇文章 1 订阅

订阅专栏

饭后茶余.闲心之作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery UI</title>
	</head>
	<style type="text/css">
		<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>
	<body>
		<div class="ui-accordion">
			<div id="drag_div"></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>

原生js的拖拽特效，很多地方都可以用到的

参考:http://hao2013.cn/?id=20

狼丶宇先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js拖拽特效

饭后茶余.闲心之作 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;JQuery UI&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css&quot
复制链接

扫一扫