HTML5之實現本地拖放

html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地拖放</title>
<style>
#imgContainer{
background-color: #cccccc;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="imgContainer"></div>
<script src="js/app1.js"></script>
</body>
</html>

pp1.js 源碼：

介拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。先點擊一個小例子：在用戶開始拖動 <p> 元素時執行 JavaScript<p draggable="true" ondragstart="myfunction(event)">拖動我</p>提示：鏈接和圖片默認是可拖動的，不需要 draggable 屬性。定義和用法在拖放的過程中會觸發以下事件：在拖動目標上觸發事件 (源元素):

1、ondragstart - 用戶開始拖動元素時觸發2、ondrag - 元素正在拖動時觸發3、ondragend - 用戶完成元素拖動后觸發釋放目標時觸發的事件：1、ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件2、ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
3、ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件4、ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件瀏覽器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔 350 毫秒會觸發 ondragover 事件。實例

先貼代碼，再逐一解釋：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#d1{
width: 110px;
height: 310px;
border: 1px dashed greenyellow;
border-radius: 10px;
float: left;
margin-right: 200px;
}
#d1_a,#d1_b,#d1_c{
width: 100px;
height: 100px;
line-height: 100px;
}
#d1_a{background-color: orangered;}
#d1_b{background-color: yellow;}
#d1_c{background-color: red;}
#d2,#d3,#d4{
width: 150px;
height: 150px;
border-radius: 10px;
border: 1px dashed greenyellow;
float: left;
}
</style>
</head>
<body>
<p draggable="true" ondragstart="myfunction(event)"></p>
<div id="d1">
<div id="d1_a" draggable="true">橘紅</div>
<div id="d1_b" draggable="true">黃色</div>
<div id="d1_c" draggable="true">紅色</div>
</div>
<div id="d2">橘紅</div>
<div id="d3">黃色</div>
<div id="d4">紅色</div>
<script>
/* 拖拽元素支持的事件

ondrag 應用于拖拽元素，整個拖拽過程都會調用

ondragstart 應用于拖拽元素，當拖拽開始時調用

ondragleave 應用于拖拽元素，當鼠標離開拖拽元素是調用

ondragend 應用于拖拽元素，當拖拽結束時調用

目標元素支持的事件

ondragenter 應用于目標元素，當拖拽元素進入時調用

ondragover 應用于目標元素，當停留在目標元素上時調用

ondrop 應用于目標元素，當在目標元素上松開鼠標時調用

ondragleave 應用于目標元素，當鼠標離開目標元素時調用

*///拖拽開始document.ondragstart=function (e) {
/*通過dataTransfer來實現數據的存儲與獲取

setData(format, data)format: 數據的類型： text/html text/uri-listData: 數據：一般來說是字符串值

*/// e.dataTransfer.setData("Text", e.target.id);e.target.style.opacity=0.5//設置透明度e.dataTransfer.setData("text",e.target.id);
}
//拖拽結束時document.ondragend=function (e) {
e.target.style.opacity=1;
}
//瀏覽器默認會阻止ondrop事件：我們必須在ondrapover中阻止默認行為document.ondragover=function (e) {
e.preventDefault();
}
//放置document.ondrop=function (e) {
var data=e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

下面分別來解析下上面代碼的意思。設置元素可拖放首先，為了使元素可拖動，把 draggable 屬性設置為 true ：

<div id="d1_a" draggable="true">橘紅</div>
<div id="d1_b" draggable="true">黃色</div>
<div id="d1_c" draggable="true">紅色</div>

拖動什么 - ondragstart 和 setData()然后，規定當元素被拖動時，會發生什么。在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：
document.ondragstart=function (e) {
e.dataTransfer.setData("text",e.target.id);
}

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("d1_1")。放到何處 - ondragoverondragover 事件規定在何處放置被拖動的數據。默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。這要通過調用 ondragover 事件的 event.preventDefault() 方法：

document.ondragover=function (e) {
e.preventDefault();
}

例: 限制范圍的拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*讓拖拽元素根據它進行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位屬性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //獲取box盒子
    var box=document.querySelector(".box");
    //獲取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距離body的凈位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件對象兼容
    //存儲鼠標按下時到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件對象兼容
    //真實的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //多拖拽盒子的left和top值進行約束
    if(left<0){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子寬度-小盒子寬度
    }
    if(top<0){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //設置拖拽元素的left和top屬性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

實例: 進一步優化(帶吸附拖拽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*讓拖拽元素根據它進行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位屬性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //獲取box盒子
    var box=document.querySelector(".box");
    //獲取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距離body的凈位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件對象兼容
    //存儲鼠標按下時到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件對象兼容
    //真實的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //彈性吸附 就是讓他還差**px時我就讓他到邊邊上
    if(left<20){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth-20)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子寬度-小盒子寬度
    }
    if(top<20){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight-20)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //設置拖拽元素的left和top屬性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

實例: 進一步優化(帶影子拖拽)

在線咨詢

上一篇：Nvidia控制面板打不開，怎么辦？
下一篇：2022年上半年湖北省高等教育自學考試轉考2月21日

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5之實現本地拖放

您的項目需求