溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為大家分享了完美實現js拖拽效果的具體代碼，告訴大家return false的用法，供大家參考，具體內容如下
1.return false可以用來阻止默認事件即系統默認事件。例如通過阻止默認事件，來對textarea中的值進行范圍限制（通過限制keycode的數值），也可以自定義在頁面中的右鍵菜單（oncontextmenu）。
2.在鼠標移動（mousemove）等事件中，是需要給事件傳一個參數，保證程序的正常運行。而為了兼容取事件方法為：var oEvent=ev||event;
3.在節點中創建一個新的節點的方法為：
var oBox=document.createElement('div');
oBox.className='box';
oBox.style.left = oDiv.offsetLeft+'px';
oBox.style.top = oDiv.offsetTop+'px';
oBox.style.width = oDiv.offsetWidth+'px';
oBox.style.height = oDiv.offsetHeight+'px';
document.body.appendChild(oBox);
//注意，在創建完之后一定要將創建好的節點加入body中！！！
下列為完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美拖拽2</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 150px;
height: 150px;
background: #71C525;
position: absolute;
}
.box{
border: 2px dashed black;
position: absolute;
}
</style>
<script>
window.onload=function()
{
var oDiv = document.getElementById('div1');
var disX=null;
var disY=null;
oDiv.onmousedown=function(ev)
{
var oEvent=event||ev;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
var oBox=document.createElement('div');
oBox.className='box';
oBox.style.left = oDiv.offsetLeft+'px';
oBox.style.top = oDiv.offsetTop+'px';
oBox.style.width = oDiv.offsetWidth+'px';
oBox.style.height = oDiv.offsetHeight+'px';
document.body.appendChild(oBox);
document.onmousemove=function(ev)
{
var oEvent=event||ev;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if (l<0) {
l=0;
} else if (l>document.documentElement.clientWidth-oDiv.offsetWidth) {
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if (t<0) {
t=0;
} else if (t>document.documentElement.clientHeight-oDiv.offsetHeight) {
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oBox.style.left = l+'px';
oBox.style.top=t+'px';
};
document.onmouseup=function()
{
document.onmousedown=null;
document.onmousemove=null;
oDiv.style.left = oBox.offsetLeft+'px';
oDiv.style.top = oBox.offsetTop+'px';
document.body.removeChild(oBox);
};
return false;//阻止默認事件（系統默認事件）！
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
