React 實現(xiàn)拖拽功能的示例代碼
更新時間：2019年01月06日 14:48:12 作者：wenruo
這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了React 實現(xiàn)拖拽功能的示例代碼，分享給大家，具體如下：
實現(xiàn)效果：
因為工作中會用到 JIRA 所以想實現(xiàn)一下相似的功能，順便學(xué)習(xí)一下 H5 的拖拽。不支持拖拽改變順序，感覺有點(diǎn)麻煩，而且沒必要。感覺相關(guān)的博文好少的，大部分都是直接上代碼，沒有解釋。
圖片默認(rèn)可以拖動，其他元素的拖動效果同圖片。正常的 div 是不能被拖動的，鼠標(biāo)點(diǎn)擊選擇后移動沒有效果，需要加 draggable="true" 使得元素可以被拖動。
拖拽相關(guān)的幾個事件，有被拖動元素的事件，也有拖動進(jìn)入的容器元素的事件。
被拖拽元素的事件：ondragstart，ondragend
放置元素的事件：ondragenter、ondragover、ondragleave、ondrop
顧名思義，不需要解釋。
需要注意是 ondragover 的默認(rèn)事件 Reset the current drag operation to "none". 所以想讓一個元素可放置，需要重寫 ondragover
element.ondragover = event => {
event.preventDefault();
// ...
}
當(dāng)一個元素是可放置的，拖拽經(jīng)過時鼠標(biāo)會變成加號（cursor: copy;）
有一個對象 dataTransfer 可以用來存儲拖拽數(shù)據(jù)。
dragEle.ondragstart = e => e.dataTransfer.setData('item', e.target.id);
拖拽開始時觸發(fā)，把被拖拽元素的 id 存入 e.dataTransfer
然后在 ondrop 的時候 可以獲取到這個值 （ondragenter、ondragover、ondragleave 獲取不到...）
putEle.ondrop = function(e) {
let id = e.dataTransfer.getData('item');
// ...
}
簡單的應(yīng)用：
<!DOCTYPE html>
<html lang="zh">
<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>Document</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 class="wrapper">
<div class="col1 col">
<div class="item" id="item1" draggable="true">item1</div>
<div class="item" id="item2" draggable="true">item2</div>
<div class="item" 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></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: '進(jìn)行中',
STATUS_DONE: '已完成'
}
let tasks = [{
id: 0,
status: STATUS_TODO,
title: '每周七天閱讀五次，每次閱讀完要做100字的讀書筆記',
username: '小夏',
point: 10
}, {
id: 1,
status: STATUS_TODO,
title: '每周七天健身4次，每次健身時間需要大于20分鐘',
username: '橘子🍊',
point: 5
}, {
id: 2,
status: STATUS_TODO,
title: '單詞*100',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 3,
status: STATUS_TODO,
title: '單詞*150',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 4,
status: STATUS_TODO,
title: '單詞*200',
username: '┑(￣Д ￣)┍',
point: 2
}, {
id: 5,
status: STATUS_TODO,
title: '單詞*250',
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
}
/**
* 傳入被拖拽任務(wù)項的 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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中rem布局在react中的應(yīng)用
這篇文章主要介紹了JavaScript中rem布局在react中的應(yīng)用 的相關(guān)資料,需要的朋友可以參考下2015-12-12
手挽手帶你學(xué)React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
JavaScript React如何修改默認(rèn)端口號方法詳解
這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號方法詳解，文中通過步驟圖片解析介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
React18中請求數(shù)據(jù)的官方姿勢適用其他框架
這篇文章主要為大家介紹了官方回答在React18中請求數(shù)據(jù)的正確姿勢詳解，同樣也適用其他框架，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了React中使用UMEditor的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React+echarts?(echarts-for-react)?實現(xiàn)中國地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
這篇文章主要介紹了記錄一次完整的react hooks實踐，通過一個簡單示例，介紹了react hooks，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了在React中this容易遇到的問題總結(jié)，文中有詳細(xì)的示例代碼，希望對大家有一定的幫助,需要的朋友可以參考下2023-05-05