html拖拽开发,H5Web前端开发_实现拖拽效果
/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前端开发_实现拖拽效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos服务器 java 项目new
- 下一篇： 2017年html5行业报告,云适配发布