錯在哪里了？沒有拖動的效果出來！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網-拖拽實現</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){
? ? ? ? //鼠標事件1 - 在標題欄按下（要計算鼠標相對拖拽元素的左上角的坐標 ，并且標記元素為可拖動）?
? ? ? ? var e=e||window.event;
? ? startX = e.pageX-g("oDrag").offSetLeft;
startY = e.pageY-g("oDrag").offSetTop;
? ? ? ? isDragging=true;
? ? })
? ? document.onmouseup = function(e){
? ? ? ? //鼠標事件3 - 鼠標松開的時候（標記元素為不可拖動）
? ? ? ?isDragging=false;
? ? }
? ? document.onmousemove = function(e) {
? ? ? ? //鼠標事件2 - 鼠標移動時（要檢測，元素是否標記為移動）
? ? ? ? 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
鼠標按下事件里面計算相對偏移位置錯了，，你都沒有定義g（）函數，怎么使用。而且oDrag已經是一個元素對象了。
2015-01-26
最后一個函數，沒有閉合}并且，if語句是怎么寫的能放分號嗎？if(isDragging === true)這句話中的isDragging 這個沒有。你再看看你寫的代碼吧，右側也有源碼可以參考