                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /鼠標(biāo)拖拽效果

有答案嗎？？

慕的地5225258

2017-05-04

源自：鼠標(biāo)拖拽效果 8-2

關(guān)注問(wèn)題我要回答

851

操作

收起

1 回答

田心楓回答被采納 +3 積分
2017-05-04

<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>慕課網(wǎng)-拖拽實(shí)現(xiàn)</title>
<style?type="text/css">

????#draggable{?width:?100px;height:?100px;?position:?absolute;top:?100px;left:?100px;border:?1px?solid?#ccc;background:?#eee;padding:?10px;cursor:?move;}

</style>
</head>
<body>

<div?id="draggable">拖我</div>

<script?type="text/javascript">
????var?oDrag?=?document.getElementById('draggable');
????var?isDraging?=?false;
????var?startX?=?0;
????var?startY?=?0;
????oDrag.addEventListener('mousedown',function(e){
????????//鼠標(biāo)事件1?-?在標(biāo)題欄按下（要計(jì)算鼠標(biāo)相對(duì)拖拽元素的左上角的坐標(biāo)?，并且標(biāo)記元素為可拖動(dòng)）
????????isDraging?=?true;
????????startX?=?e.pageX?-?this.offsetLeft;
????????startY?=?e.pageY?-?this.offsetTop;
????})
????document.onmouseup?=?function(e){
????????//鼠標(biāo)事件3?-?鼠標(biāo)松開(kāi)的時(shí)候（標(biāo)記元素為不可拖動(dòng)）
????????isDraging?=?false;
????}
????document.onmousemove?=?function(e)?{
????????//鼠標(biāo)事件2?-?鼠標(biāo)移動(dòng)時(shí)（要檢測(cè)，元素是否標(biāo)記為移動(dòng)）
????????var?moveX?=?e.pageX?-?startX;
????????var?moveY?=?e.pageY?-?startY;
????????var?pageX?=?document.documentElement.clientWidth?-?oDrag.offsetWidth;
????????var?pageY?=?document.documentElement.clientHeight?-?oDrag.offsetHeight;
????????moveX?=?Math.min(pageX,?Math.max(0,?moveX));
????????moveY?=?Math.min(pageY,?Math.max(0,?moveY));
????????if?(isDraging)?{
????????????oDrag.style.left?=?moveX?+?'px';
????????????oDrag.style.top?=?moveY?+?'px';
????????}
????};
</script>
</body>
</html>