利用jquery实现拖拽-乐呆鼠

在开始之前，先了解一下“CSS的Position定位属性”。Position 属性指规定元素的定位类型，即元素是否脱离文档流的布局（是否可以在页面的任意位置显示）。Position属性值有如下4个：

①absolute：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素（postion不为static），否则为Body文档本身。

②relative：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static：默认值；默认布局。

position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性：

①left：表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom：表示向元素的下方插入多少像素，使元素向上移动多少像素。

注意：上面属性的值可以为负，单位：px 。其中“static”不支持上面属性，如果想用js或者jQuery对元素布局进行动态改变，其布局Position属性值不能是“static”。

另外，还需要了解“jQuery中position()与offset()区别 ”。区别如下：

①position()：获取相对于它最近的具有相对位置（relative或absolute布局）的父级元素的距离，如果找不到，则返回相对于浏览器的距离。

②offset()：始终返回相对于浏览器文档的距离。

实现拖拽原理

拖拽元素是通过三个事件（mousedown、mousemove、mouseup）配合实现的，原理是用mousedown事件监控元素被鼠标按下，并记录当前鼠标相当于元素的距离；然后用mousemove事件实时监控元素距离父级元素的距离（没有父级默认是浏览器），计算出移动后的位置（减去这段距离就得到了）；最好用mouseup事件监控元素移动结束，并停止mousemove事件。注意：元素的position不能用static。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery实现div拖拽</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.div1{
	position:absolute;
	height:100px;
	width:100px;
	background:red;
	cursor:move;
}
</style>
</head>
<body>
    <div class="div1">11</div>
	<div class="div1">22</div>
	<div class="div1">33</div>
<script>
$(function () {
	var disX=0,disY=0;
	$('.div1').mousedown(function(ev){
		var _this = $(this);
		console.log('点击div1的内容：'+_this.html());
		disX=ev.pageX-$(this).offset().left;
		disY=ev.pageY-$(this).offset().top;
		$(document).mousemove(function(ev){
			_this.css('left',ev.pageX-disX);
			_this.css('top',ev.pageY-disY);
		});
		$(document).mouseup(function(){
			$(document).off();
		});
		return false;
	});
});
</script>
</body>
</html>

参考：

CSS Position 定位属性

jQuery中position()与offset()区别

利用jquery实现拖拽

实现拖拽原理

相关推荐

评论