錯(cuò)在哪里了？沒(méi)有拖動(dòng)的效果出來(lái)！
<!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: default;}
</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)）?
? ? ? ? var e=e||window.event;
? ? startX = e.pageX-g("oDrag").offSetLeft;
startY = e.pageY-g("oDrag").offSetTop;
? ? ? ? isDragging=true;
? ? })
? ? document.onmouseup = function(e){
? ? ? ? //鼠標(biāo)事件3 - 鼠標(biāo)松開(kāi)的時(shí)候（標(biāo)記元素為不可拖動(dòng)）
? ? ? ?isDragging=false;
? ? }
? ? document.onmousemove = function(e) {
? ? ? ? //鼠標(biāo)事件2 - 鼠標(biāo)移動(dòng)時(shí)（要檢測(cè)，元素是否標(biāo)記為移動(dòng)）
? ? ? ? var e = e||window.event;
? ? ? ? var mouseX = e.pageX;
? ? ? ? var mouseY = e.pageY;
? ? ? ? var moveX = 0;
? ? ? ? var moveY = 0;
? ? ? ? if(isDragging === true){
? ? ? ? ? ?moveX = mouseX - startX;
? ? ? ? ? ?moveY = mouseY - startY;
? ? ? ? ? ?var pageWidth = ?document.documentElement.clientWidth;
? ? ? ? ? ?var pageHeight = document.documentElement.clientHeight;
? ? ? ? ? ?var dialogWidth = oDrag.offsetWidth;
? ? ? ? ? ?var dialogHeight = oDrag.offsetHeight;
? ? ? ? ? ?var maxX = pageWidth-dialogWidth;
? ? ? ? ? ?var maxY = pageHeight - dialogHeight;
? ? ? ? ? ?moveX = Math.min(maxX,Math.max(0,moveX));
? ? ? ? ? ?moveY = Math.min(maxY,Math.max(0,moveY));
? ? ? ? ? ?oDrag.style.left = moveX+'px';
? ? ? ? ? ?oDrag.style.top = moveY+'px';?
? ? };
</script>
</body>
</html>
2016-02-19
鼠標(biāo)按下事件里面計(jì)算相對(duì)偏移位置錯(cuò)了，，你都沒(méi)有定義g（）函數(shù)，怎么使用。而且oDrag已經(jīng)是一個(gè)元素對(duì)象了。
2015-01-26
最后一個(gè)函數(shù)，沒(méi)有閉合}并且，if語(yǔ)句是怎么寫(xiě)的能放分號(hào)嗎？if(isDragging === true)這句話中的isDragging 這個(gè)沒(méi)有。你再看看你寫(xiě)的代碼吧，右側(cè)也有源碼可以參考