移动端拖动小图标DEMO

发布时间：2020-04-26 23:57:32 作者：pmlinjian
来源：网络阅读：1207

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Document</title>
	</head>
	<style type="text/css">
	#div1{
	width: 45px; height: 45px;
	background-color: #4D4D4D;
	position: absolute; cursor: pointer;
	-webkit-box-shadow: 3px 3px 0px 3px #C7C7C7;
	box-shadow: 3px 3px 3px 0px #C7C7C7;
	}
	#parent{
	width: 500px; height: 500px;
	border: 1px solid #CDCDCD;
	position: relative; margin: 0 auto; //父级元素设置为：
	background-color: #F4F4F4;
	}
	.postText{
	width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
	}
	.postText span{
	padding:0px 10px;
	}
	</style>
	<body>
	<div id="parent">
	<div id="div1" onmousemove="posMove(this.id)"></div>
	</div>

	<div class="postText">
	移动的距离Top：<span id="posTop"></span>Left:<span id="posLeft"></span>
	</div>

	<script type="text/javascript">
	function posMove(getdivid) {
	var oDiv = document.getElementById(getdivid);
	var oParent = document.getElementById('parent');
	var sent = {
	l: 10, //设置div在父元素的活动范围，10相当于给父div设置padding-left：10;
	r: oParent.offsetWidth - oDiv.offsetWidth, // offsetWidth:当前对象的宽度， offsetWidth = width+padding+border
	t: 10,
	b: oParent.offsetHeight - oDiv.offsetHeight,
	n: 10
	}
	drag(oDiv, sent);
	}

	/**
	*
	* @param obj:被拖动的div
	* @param sent :设置div在容器中可以被拖动的区域
	*/
	function drag(obj,sent){

	var dmW = document.documentElement.clientWidth \|\| document.body.clientWidth;
	var dmH = document.documentElement.clientHeight \|\| document.body.clientHeight;

	var sent = sent \|\| {};
	var l = sent.l \|\| 0;
	var r = sent.r \|\| dmW - obj.offsetWidth;
	var t = sent.t \|\| 0;
	var b = sent.b \|\| dmH - obj.offsetHeight;
	var n = sent.n \|\| 10;

	obj. = function (ev){
	var oEvent = ev \|\| event;
	var sentX = oEvent.clientX - obj.offsetLeft;
	var sentY = oEvent.clientY - obj.offsetTop;

	document. = function (ev){
	var oEvent = ev \|\| event;

	var slideLeft = oEvent.clientX - sentX;
	var slideTop = oEvent.clientY - sentY;

	if(slideLeft <= l){
	slideLeft = l;
	}
	if(slideLeft >= r){
	slideLeft = r;
	}
	if(slideTop <= t){
	slideTop = t;
	}
	if(slideTop >= b){
	slideTop = b;
	}

	obj.style.left = slideLeft + 'px';
	obj.style.top = slideTop + 'px';

	document.getElementById('posTop').innerHTML = slideTop;
	document.getElementById('posLeft').innerHTML = slideLeft;

	};
	document. = function (){
	document. = null;
	document. = null;
	}

	return false;
	}
	}
	</script>
	</body>
	</html>

移动端拖动小图标DEMO

相关阅读