可拖拽元素
<div draggable='true' ondrag="handleDrag">1</div>
ondrag拖拽开始时,可存放拖拽数据,例如元素ID
可放置区域
<div ondragover='handleDragover' ondrop="handleDrop"></div>
同时要设置e.preventDefault()
ondragover进入放置区域,可进行更改样式等操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽2</title>
<style type="text/css">
body{
height: 600px;
border: 1px solid green;
}
.top,.bottom{
height: 150px;
border: 1px solid red;
margin: 10px;
}
.child{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var top = document.getElementsByClassName('top')[0]
var bottom = document.getElementsByClassName('bottom')[0]
// 类数组对象
var childs = document.getElementsByClassName('child')
childs = Array.from(childs)
// dragstart,拖放元素上面
function ds(event){
// 保存拖放元素的id
var dt = event.dataTransfer;
dt.setData('id',this.id)
}
// dragover
function dv(event){
event.preventDefault()
}
// drop
function dr(event){
// 获取dataTransfer中存储的id
var dt = event.dataTransfer;
var id = dt.getData('id')
var dom = document.getElementById(id)
this.appendChild(dom)
event.stopPropagation()
}
childs.forEach(function(item){
item.ondragstart = ds
})
top.ondragover = dv
top.ondrop = dr
bottom.ondragover = dv
bottom.ondrop = dr
document.body.ondragover=dv
document.body.ondrop = dr
}
</script>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="child" id="one" draggable='true'>1</div>
<div class="child" id="two" draggable='true'>2</div>
<div class="child" id="three" draggable='true'>3</div>
<div class="child" id="four" draggable='true'>4</div>
</body>
</html>
在react项目中使用拖放,实现图片位置交换功能
import React from 'react';
// import styles from './index.less';
const Index = props => {
const { imgaeList } = props;
let item: any = null;
let lastX: any = null;
const drag = (e: any) => {
console.log(e, 'index')
item = e.target;
// item.style.backgroundColor = 'blue';
lastX = e.clientX;
e.dataTransfer.setData('Text', item.id);
};
const dragEnter = (e: any) => {
console.log(e, 'index11')
e.preventDefault();
if (e.clientX > lastX) {
e.target.after(document.getElementById(item.id));
} else {
e.target.before(document.getElementById(item.id));
}
lastX = e.clientX;
};
const drop = (e: any) => {
console.log(e, 'index1')
const aa = document.getElementById('wrap')
console.log(aa, 'index-deom')
//将改变位置后的dom传给父组件
props.getDom(aa)
e.preventDefault();
const data = e.dataTransfer.getData('Text');
// if (e.clientX > lastX) {
// e.target.after(document.getElementById(data));
// } else {
// e.target.before(document.getElementById(data));
// }
// item.style.backgroundColor = 'red';
item = null;
lastX = null;
};
const allowDrag = (e: any) => {
e.preventDefault();
};
return (
<div id="wrap" onDrop={drop} onDragOver={allowDrag}>
{
imgaeList.map((item, index) => {
return <img src={item.src} alt="" key={index} id={item.name + index} onDragStart={drag} onDragEnter={dragEnter} width={50} height={50} draggable />
})
}
</div>
);
};
export default Index;
//获取dom
const getData = () => {
const tempArr: any = []
let dom = document.getElementsByClassName('img')
if (dom) {
for (let i = 0; i < dom.length; i++) {
tempArr.push(Number(dom[i].getAttribute('id')))
}
}
return tempArr
}