<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽原理</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
onmousedown:鼠標按下時觸發
onmousemove:鼠標移動時觸發
onmouseup:鼠標擡起時觸發
*/
var oDiv = document.getElementById("div1");
oDiv .onmousedown = function(ev){
var ev = ev||event;
var disX = ev.clientX-this.offsetLeft;
var disY = ev.clientY-this.offsetTop;
if(oDiv.setCapture){
oDiv.setCapture();
}
document.οnmοusemοve= function(ev){
var ev = ev||event;
oDiv.style.left= ev.clientX-disX+"px";
oDiv.style.top= ev.clientY-disY+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
}
return false;//取消瀏覽器默認拖拽文字行爲
}
}
/*
obj.setCapture(); 設置全局捕獲，當我們給一個元素設置全局捕獲以後，那麼這個元素就會 監聽後續發生的所有事件，當有事件發生的時候，就會被當前設置全局捕獲的元素所觸發。
ie：有，並且有效果
ff：有，但是沒效果
chrome:沒有，會報錯
obj.releaseCapture()釋放全局捕獲
*/
/*
拖拽的時候，如果有文字被選中，會產生問題
原因：當鼠標按下的時候（按下時觸發），如果頁面中有文字被選中，那麼會觸發瀏覽器的默認拖拽文字行爲。
解決：
標準：阻止默認行爲
非標準ie:用全局捕獲
拖拽圖片有問題，解決辦法同上
*/
</script>
</head>
<body>
拖拽文字在此
<div id="div1"></div>
</body>
</html>是
