Because I will use JIRA in my work, I want to implement a similar function and learn about drag and drop in H5 by the way. It doesn’t support drag and drop to change the order, which feels a bit troublesome and unnecessary. I feel that there are so few related blog posts, most of them are directly on the code, no explanation.
The image can be dragged by default, and the dragging effect of other elements is the same as the image. The normal div can not be dragged, the mouse click to select after moving no effect, you need to add draggable=”true” so that the element can be dragged.
There are several events related to dragging, there are events of the dragged element, and there are events of the dragged container element.
Events of the dragged element: ondragstart, ondragend
Events of the element being placed: ondragenter, ondragover, ondragleave, ondrop
As the name implies, no explanation is needed.
Note that the default event for ondragover is Reset the current drag operation to “none”. So to make an element placeable, you need to override ondragover.
element.ondragover = event => {
event.preventDefault();
// ...
}When an element is placeable, the mouse becomes a plus sign when dragging through it (cursor: copy;)
There is an object dataTransfer that can be used to store the drag and drop data.
dragEle.ondragstart = e => e.dataTransfer.setData('item', e.target.id);Triggered at the beginning of the drag, the id of the dragged element is stored in e.dataTransfer
Then when ondrop, you can get this value (ondragenter, ondragover, ondragleave are not available…)
putEle.ondrop = function(e) {
let id = e.dataTransfer.getData('item');
// ...
}Simple applications
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React development of small applications for BOX drag-and-drop functionality - www.7ix.net</title>
<style>
.wrapper {display: flex;border: 1px solid orangered;padding: 10px;}
.col {border: 1px solid #808080;height: 500px;width: 200px;margin: 0 10px;padding: 10px;}
.item {border: 1px solid #808080;margin: 5px 0;}
</style>
</head>
<body>
<div>
<div class="col1 col">
<div id="item1" draggable="true">item1</div>
<div id="item2" draggable="true">item2</div>
<div id="item3" draggable="true">item3</div>
</div>
<div class="col2 col"></div>
<div class="col3 col"></div>
<div class="col4 col"></div>
</div>
<script>
let cols = document.getElementsByClassName('col');
for (let col of cols) {
col.ondragenter = e => {
console.log('Placement elements ondragenter', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondragover = e => {
e.preventDefault();
console.log('Placement elements ondragover', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondragleave = e => {
console.log('Placement elements ondragleave', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondrop = function(e) {
console.log('Placement elements ondrop', '<' + e.dataTransfer.getData('item') + '>');
this.append(document.getElementById(e.dataTransfer.getData('item')));
}
}
let items = document.getElementsByClassName('item');
for (let item of items) {
item.ondragstart = e => {
console.log('Drag and drop elements ondragstart');
e.dataTransfer.setData('item', e.target.id);
}
item.ondragend = e => {
console.log('Drag and drop elements ondragend');
}
}
</script>
</body>
</html>React Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React development of small applications for BOX drag-and-drop functionality - www.7ix.net</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
.item {
border: 1px solid #1da921;
width: 180px;
border-radius: 5px;
box-shadow: 0 0 5px 0 #b3b3b3;
margin: 5px auto;
background: #fff;
}
.item.active {
border-style: dashed;
}
.item-header {
font-size: 12px;
color: #9e9e9e;
padding: 3px 5px;
}
.item-main {
padding: 5px;
font-size: 14px;
color: #424242;
height: 36px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.item-header-point {
background: #ccc;
float: right;
padding: 0 4px;
min-width: 10px;
text-align: center;
color: #fff;
border-radius: 50%;
}
.col {
border: 1px solid #d2d2d2;
flex-grow: 1;
width: 180px;
height: 100%;
margin: 0 2px;
background: #eee;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.col-header {
height: 40px;
line-height: 40px;
background: #1DA921;
color: #fff;
text-align: center;
}
.col-main {
overflow: auto;
flex-grow: 1;
}
.col-main.active {
background: #00ad23;
opacity: 0.1;
}
.task-wrapper {
display: flex;
height: 400px;
width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const STATUS_TODO = 'STATUS_TODO';
const STATUS_DOING = 'STATUS_DOING';
const STATUS_DONE = 'STATUS_DONE';
const STATUS_CODE = {
STATUS_TODO: 'To be processed',
STATUS_DOING: 'In progress',
STATUS_DONE: 'Completed'
}
let tasks = [{
id: 0,
status: STATUS_TODO,
title: 'www.7ix.net',
username: 'Tom',
point: 10
}, {
id: 1,
status: STATUS_TODO,
title: 'www.7ix.net',
username: 'Jack',
point: 5
}, {
id: 2,
status: STATUS_TODO,
title: 'www.7ix.net',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 3,
status: STATUS_TODO,
title: 'www.7ix.net',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 4,
status: STATUS_TODO,
title: 'www.7ix.net',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 5,
status: STATUS_TODO,
title: 'www.7ix.net',
username: '┑(￣Д ￣)┍',
point: 2
}]
class TaskItem extends React.Component {
handleDragStart = (e) => {
this.props.onDragStart(this.props.id);
}
render() {
let { id, title, point, username, active, onDragEnd } = this.props;
return (
<div
onDragStart={this.handleDragStart}
onDragEnd={onDragEnd}
id={`item-${id}`}
className={'item' + (active ? ' active' : '')}
draggable="true"
>
<header className="item-header">
<span className="item-header-username">{username}</span>
<span className="item-header-point">{point}</span>
</header>
<main className="item-main">{title}</main>
</div>
);
}
}
class TaskCol extends React.Component {
state = {
in: false
}
handleDragEnter = (e) => {
e.preventDefault();
if (this.props.canDragIn) {
this.setState({
in: true
})
}
}
handleDragLeave = (e) => {
e.preventDefault();
if (this.props.canDragIn) {
this.setState({
in: false
})
}
}
handleDrop = (e) => {
e.preventDefault();
this.props.dragTo(this.props.status);
this.setState({
in: false
})
}
render() {
let { status, children } = this.props;
return (
<div
id={`col-${status}`}
className={'col'}
onDragEnter={this.handleDragEnter}
onDragLeave={this.handleDragLeave}
onDragOver={this.handleDragEnter}
onDrop={this.handleDrop}
draggable="true"
>
<header className="col-header">
{STATUS_CODE[status]}
</header>
<main className={'col-main' + (this.state.in ? ' active' : '')}>
{children}
</main>
</div>
);
}
}
class App extends React.Component {
state = {
tasks: tasks,
activeId: null
}
/**
* 传入被拖拽任务项的 id
*/
onDragStart = (id) => {
this.setState({
activeId: id
})
}
dragTo = (status) => {
let { tasks, activeId} = this.state;
let task = tasks[activeId];
if (task.status !== status) {
task.status = status;
this.setState({
tasks: tasks
})
}
this.cancelSelect();
}
cancelSelect = () => {
this.setState({
activeId: null
})
}
render() {
let { tasks, activeId } = this.state;
let { onDragStart, onDragEnd, cancelSelect } = this;
return (
<div className="task-wrapper">
{
Object.keys(STATUS_CODE).map(status =>
<TaskCol
status={status}
key={status}
dragTo={this.dragTo}
canDragIn={activeId != null && tasks[activeId].status !== status}>
{ tasks.filter(t => t.status === status).map(t =>
<TaskItem
key={t.id}
active={t.id === activeId}
id={t.id}
title={t.title}
point={t.point}
username={t.username}
onDragStart={onDragStart}
onDragEnd={cancelSelect}
/>)
}
</TaskCol>
)
}
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body>
</html>
