简单的javascript拖拽示例

最新推荐文章于 2024-04-18 09:25:50 发布

S117

最新推荐文章于 2024-04-18 09:25:50 发布

阅读量221

点赞数

分类专栏： javascript学习笔记文章标签： javascript function object div string html

本文链接：https://blog.csdn.net/longtian1213/article/details/7835608

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

利用javascript来做拖转，如果忽略很多细节，实现起来很简单，但人们都说细节才是最重要的，我也是刚自学javascript不久，对于拖拽的很多细节我自己也不是很清楚，我只知道在鼠标按下时记录下鼠标位置和元素位置，鼠标移动时元素跟着移动，当松开鼠标按键的时候，拖拽完成，我绝对对我我们初学者来说，过于关注细节会带来一种恐惧，让人渐渐失去学习的兴趣，反而不如先忽略一些细节，把demo做出来，这样对自己也是一种鼓励，更能激发人们学习的兴趣！当然细节也是很重要的，只是先放一放，当我们对一门语言掌握到一定程度时，再来多关注些细节的东西。

JS代码：

(function() {
	var startY = 0;
	var startY = 0;
	var startTop = 0;
	var startLeft = 0;
	var div = null;
	var target = null;
	/**
	 *构建移动对象 
	 */
	Drag = function(id) {
		if ( typeof id == 'string') {
			target = document.getElementById(id);
			addEventListener(target, "mousedown", mousedown);
			addEventListener(target, "mouseup", mouseup);
		}
	}
	/**
	 *添加事件 
	 */
	var addEventListener = function(node, type, handler) {
		if (node.addEventListener) {
			node.addEventListener(type, handler, false);
		} else if (node.attachEvent) {
			node.attachEvent('on' + type, handler);
		} else {
			node['on' + type] = handler;
		}
	}	
	/**
	 *删除事件 
	 */
	var removeEventListener = function(node, type, handler) {
		if (node.removeEventListener) {
			node.removeEventListener(type, handler, false);
		} else if (node.detachEvent) {
			node.detachEvent('on' + type, handler);
		} else {
			node['on' + type] = null;
		}
	}
	/**
	 * 获取event
	 */
	var getEvent = function(event){
		return event || window.event;
	}
	/**
	 *获取鼠标位置 
 	* @param {Object} event
	 */
	var mouseCoords = function(event){
		var point = {
			x : 0,
			Y : 0
		}
		if (event.pageX || event.pageY){
				point.x = event.pageX,
				point.y = event.pageY
		}else{
				point.x =  event.clientX + document.body.scrollLeft - document.body.clientLeft,
				point.y = event.clientY + document.body.scrollTop - document.body.clientTop
		}
		return point;
	}
	/**
	 * 鼠标按下事件
	 * @param {Object} event
	 */
	var mousedown = function(event){
		event = getEvent(event);
		target.style.cursor = "move";
		startX = event.clientX - target.offsetLeft;
		startY = event.clientY - target.offsetTop;
		startTop = target.offsetTop;
		startLeft = target.offsetLeft;
		addEventListener(document, "mousemove", mousemove);
	}
	/**
	 *鼠标移动事件 
 	* @param {Object} event
	 */
	var mousemove = function(event){
		event = getEvent(event);
		var m = mouseCoords(event);
		target.style.top = m.y - startY  + "px";
		target.style.left = m.x - startX + "px";
	}
	/**
	 *鼠标按键松开事件 
	 */
	var mouseup = function(){
		removeEventListener(document, "mousemove", mousemove);
	}
	
})();

HTML代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="srcitp/drag.js"></script>
	</head>
	<body id = "body">
	<div id = "div" style = "width:50px;height: 50px;background-color: black;position: absolute">
		
	</div>
	</body>
	<script type="text/javascript">;
		var drag = new Drag("div");
	</script>
</html>

S117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的javascript拖拽示例

利用javascript来做拖转，如果忽略很多细节，实现起来很简单，但人们都说细节才是最重要的，我也是刚自学javascript不久，对于拖拽的很多细节我自己也不是很清楚，我只知道在鼠标按下时记录下鼠标位置和元素位置，鼠标移动时元素跟着移动，当松开鼠标按键的时候，拖拽完成，我绝对对我我们初学者来说，过于关注细节会带来一种恐惧，让人渐渐失去学习的兴趣，反而不如先忽略一些细节，把demo做出来，这样对
复制链接

扫一扫

专栏目录