div拖動
html中元素的拖動的實現原理是,當鼠標拖動元素時,改變元素的絕對定位的左邊left和頂部top的位置.下面以簡單的div拖動爲例：javascript
1、首先對div dragDiv 的css設置成position:absolute絕對定位.css
只有當鼠標在目標div上按下時,鼠標拖動中div才改變位置。當鼠標鬆開時,鼠標移動,div位置不變。html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV 拖動</title>
<style type="text/css">
*{margin:0; padding:0;}
#dragDiv{width:200px; height:200px; border-radius:5px; background-color:#903; position:absolute; top:10px; left:10px;}
</style>
</head>java
<body>
<div id="dragDiv">拖動元素DIV內的內容</div>
<script type="text/javascript">ui
function getId(id){return document.getElementById(id)};//根據元素ID返回元素
function dragDiv(dragControl, dragContent){
var _x = 0, _y = 0, _drag = false, cw, ch, sw, sh;
var dragContent = typeof dragContent == "undefined" ? dragControl : dragContent; //若是不存在第二個參數就把拖動對象設置爲第一個參數
getId(dragControl).onmousedown = function(e){
_drag = true;
e = window.event?window.event:e;
cw = document.documentElement.clientWidth;
ch = document.documentElement.clientHeight;
sw = parseInt(getId(dragContent).offsetWidth);
sh = parseInt(getId(dragContent).offsetHeight);
_x = e.clientX - getId(dragContent).offsetLeft; // 獲取當前鼠標相對div原點的座標
_y = e.clientY - getId(dragContent).offsetTop;
};
document.onmousemove = function(e){
if(_drag){
e = window.event?window.event:e;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 禁止拖放對象文本被選擇的方法
document.body.setCapture && getId(dragContent).setCapture(); // IE下鼠標超出視口仍可被監聽
var x = e.clientX - _x;
var y = e.clientY - _y;
x = x < 0 ? x = 0 : x < (cw-sw) ? x :(cw-sw); // 是否超出窗口的判斷
y = y < 0 ? y = 0 : y < (ch-sh) ? y :(ch-sh);
getId(dragContent).style.left = x + "px";
getId(dragContent).style.top = y + "px";
};
};
document.onmouseup = function(){
_drag = false;
document.body.releaseCapture && getId(dragContent).releaseCapture();
};
}
dragDiv("dragDiv");
</script>
</body>
</html>htm
- 1. 可拖動的div
- 2. jQuery拖動div，移動div，彈出層
- 3. jQuery 拖動div，判斷拖動的div是否在一個div層上
- 4. js實現可拖動Div
- 5. 20190529 div-拖動drag（一）
- 6. 20190530 div-拖動drag（二）
- 7. 彈出可拖動的div
- 8. 【j2ee】div浮動層拖拽
- 9. JS實現拖動div層移動
- 10. 移動觸摸屏的div拖動Demo
- 更多相關文章...
- • W3C XQuery 活動 - W3C 教程
- • W3C Soap 活動 - W3C 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。