拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}

    div {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        float: left;
    }

    .box1 img {
        width: 300px;
    }
</style>

</head>
<body>
<div class="box1">

<img src="img/1.jpg" alt="" draggable="true" id="dragImg">
</div>
<div class="box2" ondragstart=""></div>
</body>
<script>

//ondragstart 作用于拖拽元素 當拖拽開始的時候被調用
//ondrag      作用于拖拽元素 拖拽過程中  持續調用
//ondragend   作用于拖拽元素 在拖拽完成時被調用
//ondragenter 作用于目標元素 在拖拽元素進入到目標元素被調用
//ondragleave 作用于目標元素 在拖拽元素離開目標元素被調用
//ondragover  作用于目標元素 在拖拽元素位于目標元素上方時  持續被調用
//ondrop      作用于目標元素 在拖拽元素位于目標元素上方鼠標松開被調用

/* img.ondragstart = function (e) {
console.log('start')
}
/!img.ondrag = function (e) {
console.log('drag')
}
!/
box2.ondragenter = function (e) {
console.log("enter")
}
box2.ondragleave = function (e) {
console.log("leave")
}
box2.ondragover = function (e) {
console.log("over")
}
box2.ondrop = function (e) {
console.log("drop")
}
img.ondragend = function (e) {
console.log("end")
}*/

//拖拽釋放的步驟
//1、在 拖拽元素上 ondragstart  給e.dataTransfer 對象設置一二拖拽元素標識
//2、在  ondrop  給e.dataTransfer  獲取到  設置的拖拽對象的標識
//3、通過獲取到標識    去獲取拖拽元素
//4、將獲取到的拖拽元素  添加到目標元素內



var img = document.querySelector('img');
var box1  =document .querySelector(".box1")
var box2 = document.querySelector('.box2')


box1.ondragover = function (e) {
    e.preventDefault();
}
box1.ondrop =function (e) {
    var _id = e.dataTransfer.getData("id");
    var img = document.querySelector("#"+_id)
    box1.appendChild(img);
}


box2.ondragover = function (e) {
    //阻止默認行為
    e.preventDefault();
}
box2.ondrop =function (e) {
    // 第二步
    var _id = e.dataTransfer.getData("id");
    // 第三步
    var img = document.querySelector("#"+_id)
    // 第四步
    box2.appendChild(img);
}



img.ondragstart = function (e) {
    // dataTransfer  是事件對象用來存儲拖拽信息的對象
// setData() 方法進行設置標識需要傳入兩個參數
// 第一個為標識的key  第二個為標識的值
    //第一步
    e.dataTransfer.setData("id",e.target.id);
    console.log("start");
}

</script>
</html>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容