綜合實戰(zhàn)題
你已經(jīng)學習完了本案例課程，接下來編寫一段代碼，使得一個元素塊可以被拖動。效果如下圖所示：
任務
根據(jù)右側代碼編輯中的第22行，26行和30行代碼的相關注釋，完成代碼的書寫及效果實現(xiàn)。
- ?不會了怎么辦
-
鼠標事件1
isDraging = true;
startX = e.pageX - this.offsetLeft ;
startY = e.pageY - this.offsetTop ;
鼠標事件2
if (isDraging) {
oDrag.style.left = ( e.pageX - startX ) + "px";
oDrag.style.top = ( e.pageY - startY ) + "px";
}
鼠標事件3
console.log('mouseup , isDraging = false');
isDraging = false;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網(wǎng)-拖拽實現(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){
//鼠標事件1 - 在標題欄按下（要計算鼠標相對拖拽元素的左上角的坐標 ，并且標記元素為可拖動）
})
document.onmouseup = function(e){
//鼠標事件3 - 鼠標松開的時候（標記元素為不可拖動）
}
document.onmousemove = function(e) {
//鼠標事件2 - 鼠標移動時（要檢測，元素是否標記為移動）
};
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
