React开发小应用：实现BOX拖拽功能 - Web前端
作者：98wpeu发布时间：2026-09-06分类：网页前端技术浏览：8
导读：分享react开发小应用：实现BOX拖拽功能。因为工作中会用到JIRA所以想实现一下相似的功能，顺便学习一下H5的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相...
分享react开发小应用：实现BOX拖拽功能。
因为工作中会用到 JIRA 所以想实现一下相似的功能，顺便学习一下 H5 的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。
图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加 draggable="true" 使得元素可以被拖动。
拖拽相关的几个事件，有被拖动元素的事件，也有拖动进入的容器元素的事件。
被拖拽元素的事件：ondragstart，ondragend
放置元素的事件：ondrAgenter、ondragover、ondragleave、ondrop
顾名思义，不需要解释。
需要注意是 ondragover 的默认事件 Reset the current drag operation to "none". 所以想让一个元素可放置，需要重写 ondragover
element.ondragover = event => {
event.PReventDefault();
// ...
}当一个元素是可放置的，拖拽经过时鼠标会变成加号（cursor: copy;）
有一个对象 dataTransfer 可以用来存储拖拽数据。
dragEle.ondragstart = e => e.dataTransfer.setData('item', e.target.id);拖拽开始时触发，把被拖拽元素的 id 存入 e.dataTransfer 然后在 ondrop 的时候 可以获取到这个值 （ondragenter、ondragover、ondragleave 获取不到...）
putEle.ondrop = function(e) {
let id = e.dataTransfer.getData('item');
// ...
}简单的应用：
<!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开发小应用：实现BOX拖拽功能 - Web前端之家www.jiangweishan.com</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('放置元素 ondragenter', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondragover = e => {
e.preventDefault();
console.log('放置元素 ondragover', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondragleave = e => {
console.log('放置元素 ondragleave', '<' + e.dataTransfer.getData('item') + '>');
}
col.ondrop = function(e) {
console.log('放置元素 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('拖拽元素 ondragstart');
e.dataTransfer.setData('item', e.target.id);
}
item.ondragend = e => {
console.log('拖拽元素 ondragend');
}
}
</script>
</body>
</html>文章开头部分的 React 写的 demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React开发小应用：实现BOX拖拽功能 - WEB前端之家www.jiangweishan.com</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/babel-standalone@6.15.0/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: '待处理',
STATUS_DOING: '进行中',
STATUS_DONE: '已完成'
}
let tasks = [{
id: 0,
status: STATUS_TODO,
title: 'web前端之家-首页 www.jiangweishan.com',
Username: '小夏',
point: 10
}, {
id: 1,
status: STATUS_TODO,
title: 'Web前端之家-教程 www.jiangweishan.com',
username: '橘子',
point: 5
}, {
id: 2,
status: STATUS_TODO,
title: 'WEB前端之家-Vue开发 www.jiangweishan.com',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 3,
status: STATUS_TODO,
title: 'Web前端之家-react开发 www.jiangweishan.com',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 4,
status: STATUS_TODO,
title: 'Web前端之家-Canvas www.jiangweishan.com',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 5,
status: STATUS_TODO,
title: 'Web前端之家-SEO www.jiangweishan.com',
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>
相关推荐
- react开发小应用：动态添加样式，点击按钮让文字显示隐藏为demo - Web前端
- 网站SEO优化：关于重复性内容6个注意点 - Web前端
- vue开发小TIPS：可拖拽的弹框 - Web前端
- vue开发：了解下vue中的双向数据绑定原理 - Web前端
- 关于在nodejs里使用ES6模块后引出的一系列“奇案” - Web前端
- 了解下Google搜索算法：蜂鸟Hummingbird - Web前端
- 关于WordPress SEO优化那点事：分享20个技巧给大家 - Web前端
- vue开发TIPS：了解下watch和computed - Web前端
- vue开发：了解Vue 3中的一些新特性以及和Vue 2的对比 - Web前端
- 使用JavaScript的不可变数组方法编写更干净的代码 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性