首页 > 代码库 > 移动端拖动小图标DEMO

移动端拖动小图标DEMO

2024-08-11 20:18:21   217人阅读



<!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


联系
我们