/p>

<

h5等前端開發人員:頁面開發

text-align: center;

}

.top {

text-align: center;

}

.top img {

margin: 30px;

border: dotted 1px pink;

}

.body {

display: flex;

justify-content: center;

}

.body div {

margin: 20px;

width: 100px;

height: 100px;

border: solid 1px #000;

}

.body div:nth-child(1) {

background: blue;

}

.body div:nth-child(2) {

background: red;

}

.body div:nth-child(3) {

background: green;

}

.showBox {

width: 200px;

height: 200px;

border: dashed 1px blue;

margin: 0 auto;

}

圖片可拖拽

盒子可拖拽

拖拽到這里

window.onload = function () {

var moveDemo = null;

// 獲取所有的div色塊，為所有的色塊添加拖拽事件

var divs = document.querySelectorAll(“.body div”);

for (i = 0; i < divs.length; i++) {

divs[i].ondragstart = function () {

moveDemo = this;

}

};

// 獲取所有的img圖片，為所有的圖片添加拖拽事件

var imgs = document.querySelectorAll(“.top img”);

for (i = 0; i < imgs.length; i++) {

imgs[i].ondragstart = function () {

moveDemo = this;

};

};

// 獲取最后展示的元素

var showBox = document.querySelector(“.showBox”);

// 開啟接受拖拽

showBox.ondragover = function (e) {

e.preventDefault();

};

// 添加拖拽結束事件

showBox.ondrop = function () {

if (moveDemo.src) {

this.style.background = “url(” + moveDemo.src + “) no-repeat center/cover”;

} else {

this.style.background = window.getComputedStyle(moveDemo, null).background;

}

}

}

總結

以上是生活随笔為你收集整理的html拖拽开发,H5Web前端开发_实现拖拽效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。