綜合實(shí)戰(zhàn)題
你已經(jīng)學(xué)習(xí)完了本案例課程，接下來編寫一段代碼，使得一個(gè)元素塊可以被拖動(dòng)。效果如下圖所示：
任務(wù)
根據(jù)右側(cè)代碼編輯中的第22行，26行和30行代碼的相關(guān)注釋，完成代碼的書寫及效果實(shí)現(xiàn)。
- ?不會(huì)了怎么辦
-
鼠標(biāo)事件1
isDraging = true;
startX = e.pageX - this.offsetLeft ;
startY = e.pageY - this.offsetTop ;
鼠標(biāo)事件2
if (isDraging) {
oDrag.style.left = ( e.pageX - startX ) + "px";
oDrag.style.top = ( e.pageY - startY ) + "px";
}
鼠標(biāo)事件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)-拖拽實(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)相對拖拽元素的左上角的坐標(biāo) ，并且標(biāo)記元素為可拖動(dòng)）
})
document.onmouseup = function(e){
//鼠標(biāo)事件3 - 鼠標(biāo)松開的時(shí)候（標(biāo)記元素為不可拖動(dòng)）
}
document.onmousemove = function(e) {
//鼠標(biāo)事件2 - 鼠標(biāo)移動(dòng)時(shí)（要檢測，元素是否標(biāo)記為移動(dòng)）
};
</script>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
