可拖拽div

時間 2019-12-09

標籤 div 欄目 CSS 简体版

原文原文鏈接

在開發的時候須要一個可拖拽的prompt彈框。本身寫了一個，大概思路爲：javascript

1.獲取鼠標左鍵按下移動的起點座標（x,y）。css

2.獲取div的left和top屬性。html

3.獲得鼠標座標到左上角的距離（x-top,y-top）java

　　而後很少囉嗦，看代碼。web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 拖拽 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
</head>
<style type="text/css">
*{padding:0;margin:0}
body{width:100%;height:100%;margin:0 auto;background:rgb(151,223,185)}
html,body{margin:0;width:100%;height:100%}
dv1{width:200px;height:30px;background:silver}
#box{position:absolute;left:300px;top:100px;padding:5px;background:#f0f3f9;font-size:15px;-moz-box-shadow:2px 2px 4px #666666;-webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6;background:#beceed;border-bottom:1px solid #a0b3d6;padding:5px 1px;cursor:move;}
#content{width:420px;height:250px;padding:10px 5px;border:1px solid #beceed}
</style>
<script type="text/javascript">
<!--

var dv1 = document.getElementsByTagName("div");
var isdrag = false;//拖拽標識
var x=0,y=0;//當前鼠標座標
var box = document.getElementById("box");
var t1=0;//定時

window.onload = function()
{
var main = document.getElementById("main");
var box = document.getElementById("box");
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
var sp1 = document.getElementById("sp1");
sp1.innerHTML="瀏覽器名稱："+ browser+"<br/>"+"瀏覽器版本："+ version;

addEvent(main,"mousedown",mousedown);
addEvent(window,"mouseup",mouseup);

onmousemove = function(event)
{
if(isdrag && event.button==0)
{
var left = 0;
var top = 0;
x=event.clientX;
y=event.clientY;
if(t1==0){　　//獲取剛開始移動的鼠標到左上角的距離
dv1[0].innerHTML = x-box.offsetLeft;
dv1[1].innerHTML = y-box.offsetTop;
}

t1 = setTimeout(checkDrag,10);

left = x - dv1[0].innerHTML;
top = y - dv1[1].innerHTML;

box.style.left = left+"px";
box.style.top=top+"px";
}

}

}

function mousedown(event){
if(event.button>0)return;    //只能左鍵動做
isdrag = true;
x=event.clientX;
y=event.clientY;

}

function mouseup(event){
isdrag = false;
t1=0;
}

 

/***
*自定義綁定事件方法
*obj--綁定事件對象
*type--事件名稱
*fn--事件執行的函數
*/
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}

 

function checkDrag(){}//setTimeout調用空函數


//-->
</script>
<body>
<div id="dv1">300</div>
<div id="dv2">100</div>
<span id="sp1"></span>
<div id="box" style="left:300px;top:100px">
<div id="main" >拖拽</div>
<div id="content">
內容......
</div>
</div>
</body>
</html>

一個簡單的div拖拽效果，最後進行須要的樣式處理和事件處理便可獲得自定義prompt彈出框（這裏再也不寫出）。瀏覽器

純碎爲了學習和記錄。app

1. div拖拽
2. div 拖拽佈局
3. 實現Div拖拽
4. div的拖拉拽
5. 使div彈窗可拖拽指令
6. javascript:浮動div，可拖拽div,遮罩層(div和iframe實現)
7. 純js實現DIV拖拽
8. div拖拽效果 JQuery
9. 鼠標拖拽div元素
10. 拖拽調整Div大小
更多相關文章...
• Swift 可選鏈 - Swift 教程
• Scala 函數 - 可變參數 - Scala教程
• Git可視化極簡易教程 — Git GUI使用方法
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。