{"id":38296,"date":"2023-10-14T23:30:00","date_gmt":"2023-08-20T01:20:56","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/"},"modified":"2024-05-04T04:15:12","modified_gmt":"2024-05-03T20:15:12","slug":"%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/","title":{"rendered":"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u672c\u6b21\u6211\u4eec\u5c06\u4f7f\u7528React\u548creact-beautiful-dnd\u6765\u89e3\u91ca\u5236\u4f5c\u4e00\u4e2a\u7c7b\u4f3cTrello\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3002\u867d\u7136\u6211\u4e5f\u624d\u5f00\u59cb\u5b66\u4e60React\u4e0d\u5230\u4e00\u4e2a\u6708\uff0c\u53ef\u80fd\u8fd8\u6709\u4e9b\u4e0d\u8db3\u4e4b\u5904\uff0c\u4f46\u5982\u679c\u53ef\u4ee5\u7684\u8bdd\uff0c\u5e0c\u671b\u80fd\u591f\u5f97\u5230\u4e00\u4e9b\u5efa\u8bae\u548c\u8bc4\u8bba\u3002<\/p>\n

\u53ef\u4f9b\u53c2\u8003<\/h2>\n

\u8fd9\u7bc7\u6587\u7ae0\u662f\u6839\u636e\u4e0b\u9762\u7684\u94fe\u63a5\u8fdb\u884c\u5b9e\u9645\u64cd\u4f5c\u540e\u6240\u521b\u5efa\u7684\u5185\u5bb9\u8fdb\u884c\u89e3\u91ca\u3002
\n\u4e3a\u4e86\u65b9\u4fbf\u90a3\u4e9b\u4e0d\u61c2\u82f1\u8bed\u6216\u611f\u5230\u96be\u4ee5\u5165\u95e8\u7684\u4eba\u800c\u5199\u7684\u3002
\n\u987a\u4fbf\u4e00\u63d0\uff0c\u6211\u5b8c\u5168\u4e0d\u61c2\u82f1\u8bed\uff0c\u6240\u4ee5\u5728\u8fdb\u5c55\u4e2d\u4e00\u8fb9\u8fdb\u884c\u7ffb\u8bd1\u548c\u4f7f\u7528console.log()\u9010\u4e00\u786e\u8ba4\u6570\u503c\u548c\u7ed3\u679c\u3002<\/p>\n

\u901a\u8fc7\u9605\u8bfb\u8fd9\u7bc7\u6587\u7ae0\uff0c\u60a8\u5c06\u80fd\u591f\u505a\u5230\u4ee5\u4e0b\u4e8b\u60c5<\/h2>\n

– \u5217\u8868\u6392\u5e8f
\n– \u62d6\u653e\u64cd\u4f5c\u4e2d\u6837\u5f0f\u7684\u53d8\u5316
\n– \u7406\u89e3react-beautiful-dnd\u5185\u90e8\u7684\u8fd0\u4f5c\u65b9\u5f0f
\n– styled-components\u7684\u7b80\u5355\u5199\u6cd5<\/p>\n

\u5efa\u7acb\/\u642d\u5efa\u74b0\u5883<\/h2>\n

\u9996\u5148\uff0c\u6211\u4eec\u5c06\u4f7f\u7528create-react-app\u8fdb\u884c\u73af\u5883\u8bbe\u7f6e\u3002
\n\u9996\u5148\uff0c\u5728github\u4e0a\u521b\u5efa\u4e00\u4e2a\u5b58\u50a8\u5e93\u3002\u8fd9\u6b21\u6211\u9009\u62e9\u4e86\u5b58\u50a8\u5e93\u540d\u79f0\u4e3areact-beautiful-dnd-practice-demo\u3002
\n\u521b\u5efa\u5b8c\u6210\u540e\uff0c\u5c06\u5176\u514b\u9686\u5230\u672c\u5730\u3002<\/p>\n

$ git clone https:\/\/github.com\/shouyamamoto\/react-beautiful-dnd-practice-demo\r\n<\/code><\/pre>\n
\u7136\u540e\u8fdb\u5165git clone\u7684\u6587\u4ef6\u5939\uff0c\u8fd0\u884ccreate-react-app\u547d\u4ee4\u3002<\/p>\n
$ npx create-react-app ..\/react-beautiful-dnd-practice-demo\r\n<\/code><\/pre>\n
\u5f53\u6267\u884c\u5b8c\u6210\u540e\uff0c\u6211\u8ba4\u4e3a\u6587\u4ef6\u5939\u7684\u7ed3\u6784\u5c06\u770b\u8d77\u6765\u50cf\u8fd9\u6837\u3002<\/p>\n
react-beautiful-dnd-practice-demo\r\n  |\u30fcnode_modules\r\n  |\u30fcpublic\r\n  |\u30fcsrc\r\n  package-lock.json\r\n  package.json\r\n  README.md\r\n<\/code><\/pre>\n
\u8fd9\u6b21\u6211\u4eec\u5c06\u5728src\u6587\u4ef6\u5939\u5185\u8fdb\u884c\u5de5\u4f5c\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u5220\u9664\u4e0d\u5fc5\u8981\u7684\u6587\u4ef6\u3002
\n\u9996\u5148\uff0c\u5220\u9664src\/index.js\u6587\u4ef6\u4e4b\u5916\u7684\u6240\u6709\u6587\u4ef6\u3002<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u6574\u7406\u4e00\u4e0bindex.js\u6587\u4ef6\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/React.StrictMode><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
\u4e3a\u4e86\u786e\u8ba4\u5b83\u662f\u5426\u53ef\u4ee5\u6b63\u5e38\u5de5\u4f5c\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u5728\u5c4f\u5e55\u4e0a\u8f93\u51fa”\u4f60\u597d\uff0c\u4e16\u754c”\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> App<\/span> =<\/span> ()<\/span> =><\/span> '<\/span>hello world!<\/span>'<\/span> \/\/ \u8ffd\u8a18<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/React.StrictMode><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u5728\u7ec8\u7aef\u4e0a\u8fd0\u884cnpm start\u547d\u4ee4\u3002<\/p>\n
$ npm start\r\n<\/code><\/pre>\n
\u5982\u679c\u6d4f\u89c8\u5668\u81ea\u52a8\u542f\u52a8\u5e76\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u201chello world\u201d\uff0c\u5219\u73af\u5883\u8bbe\u7f6e\u5c31\u53ef\u4ee5\u4e86\u270c\ufe0f<\/p>\n
\u8bd5\u7740\u521b\u5efa\u5e76\u663e\u793a\u7ba1\u7406\u7684\u6570\u636e<\/h2>\n
\u672c\u6587\u4ecb\u7ecd\u4e86\u8ddf\u7740react-beautiful-dnd\u7684\u6559\u7a0b\u53bb\u89e3\u91ca\u4ee5\u53ca\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\u529f\u80fd\u6240\u9700\u7684\u672c\u5730\u6587\u4ef6\u6570\u636e\u3002\u73b0\u5728\uff0c\u5728src\u6587\u4ef6\u5939\u4e2d\u521b\u5efainitial-data.js\u3002<\/p>\n
src \r\n  |- initial-data.js\r\n<\/code><\/pre>\n
const<\/span> initialData<\/span> =<\/span> {<\/span>\r\n  tasks<\/span>:<\/span> {<\/span>\r\n    '<\/span>task1<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task1<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Take out the garbage<\/span>'<\/span>},<\/span>\r\n    '<\/span>task2<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task2<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Watch my favorite show<\/span>'<\/span>},<\/span>\r\n    '<\/span>task3<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task3<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Charge my phone<\/span>'<\/span>},<\/span>\r\n    '<\/span>task4<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task4<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Cook dinner<\/span>'<\/span>},<\/span>\r\n  },<\/span>\r\n  columns<\/span>:<\/span> {<\/span>\r\n    '<\/span>column-1<\/span>'<\/span>:<\/span> {<\/span>\r\n      id<\/span>:<\/span> '<\/span>column-1<\/span>'<\/span>,<\/span>\r\n      title<\/span>:<\/span> '<\/span>Todo<\/span>'<\/span>,<\/span>\r\n      taskIds<\/span>:<\/span> [<\/span>'<\/span>task1<\/span>'<\/span>,<\/span> '<\/span>task2<\/span>'<\/span>,<\/span> '<\/span>task3<\/span>'<\/span>,<\/span> '<\/span>task4<\/span>'<\/span>]<\/span>\r\n    },<\/span>\r\n  },<\/span>\r\n  columnOrder<\/span>:<\/span> [<\/span>'<\/span>column-1<\/span>'<\/span>],<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> initialData<\/span>\r\n<\/code><\/pre>\n
\u4efb\u52a1\u4e2d\u4f7f\u7528\u4efb\u52a1\u7684ID\u4f5c\u4e3a\u952e\u3002\u6bcf\u4e2a\u4efb\u52a1\u90fd\u5305\u542bID\u548c\u5185\u5bb9\uff08\u5783\u573e\u5904\u7406\uff09\u3002<\/p>\n
\u5728”columns”\u4e2d\uff0c\u6211\u4eec\u653e\u7f6e\u4e86\u6240\u9700\u7684\u5217\u4fe1\u606f\u3002
\n\u7531\u4e8e\u8fd9\u4e00\u5217\u7684\u6807\u9898\u662f”ToDo”\uff0c\u6839\u636e\u8fd9\u7bc7\u6587\u7ae0\u60a8\u5e94\u8be5\u80fd\u591f\u7406\u89e3\u5b83\u6307\u7684\u662f\u6700\u5de6\u8fb9\u7684\u90a3\u4e00\u5217\u3002
\n“taskIds”\u5b57\u6bb5\u8fd8\u51b3\u5b9a\u4e86\u4efb\u52a1\u7684\u987a\u5e8f\u3002<\/p>\n
columnOrder\u786e\u5b9a\u4e86\u4ee5\u54ea\u79cd\u987a\u5e8f\u663e\u793a\u5217\u3002
\n\u9996\u5148\u53ea\u521b\u5efa\u4e86\u4e00\u4e2a\u5217\uff08Todo\uff09\uff0c\u6240\u4ee5\u53ea\u586b\u5165\u4e86\u4e00\u4e2a\u503c\u3002\u4e4b\u540e\u8fd8\u4f1a\u521b\u5efa\u8fdb\u884c\u4e2d\u7684\u5217\u548c\u5217\u4e3e\u5df2\u5b8c\u6210\u4efb\u52a1\u7684\u5217\u3002<\/p>\n
\u5728index.js\u4e2d\u5bfc\u5165\u5e76\u4f7f\u7528\u6b64export\u3002<\/p>\n
\u9996\u5148\uff0c\u7f16\u5199\u4ee3\u7801\u6765\u8f93\u51faTodo\u6807\u9898\uff0c\u4ee5\u786e\u4fdd\u5b83\u53ef\u4ee5\u6b63\u786e\u4f7f\u7528\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> initialData<\/span> from<\/span> '<\/span>.\/initial-data<\/span>'<\/span> \/\/ \u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\n\r\nclass<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> initialData<\/span> \/\/ state\u3092\u8a2d\u5b9a<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>((<\/span>columnId<\/span>)<\/span> =><\/span> {<\/span>\r\n      const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n      const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n      return<\/span> column<\/span>.<\/span>title<\/span> \/\/ \u30bf\u30a4\u30c8\u30eb\u3092\u8868\u793a\u3055\u305b\u308b<\/span>\r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n\u4ee5\u4e0b\u7565<\/span>\r\n<\/code><\/pre>\n
\u53ea\u8981\u6d4f\u89c8\u5668\u4e2d\u663e\u793a\u51fa\u201cTodo\u201d\u4e8c\u5b57\u5c31\u53ef\u4ee5\u4e86\u3002
\n\u65e2\u7136\u786e\u8ba4\u4e86\u5b83\u80fd\u6b63\u5e38\u5de5\u4f5c\uff0c\u4e0b\u4e00\u6b65\u6211\u4eec\u5c06\u5f00\u59cb\u5217\u4e3e\u4efb\u52a1\u3002<\/p>\n
\u6b64\u5916\uff0c\u6211\u5c06\u4e0d\u4f1a\u8be6\u7ec6\u89e3\u91ca\u5173\u4e8eJavaScript\u548cReact\u7684\u63cf\u8ff0\uff0c\u4f46\u6211\u6253\u7b97\u9002\u5f53\u5730\u52a0\u5165\u6ce8\u91ca\u6765\u8fdb\u884c\u89e3\u91ca\uff08\u6211\u8fd8\u4f1a\u8d34\u4e0a\u4e00\u4e9b\u94fe\u63a5\uff09\u3002\u5982\u679c\u4f60\u5bf9\u6240\u5199\u7684\u5904\u7406\u8fc7\u7a0b\u4e0d\u4e86\u89e3\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u4f60\u7684JavaScript\u57fa\u7840\u77e5\u8bc6\u6216React\u57fa\u7840\u77e5\u8bc6\u4e0d\u8db3\uff0c\u6240\u4ee5\u6211\u5efa\u8bae\u4f60\u91cd\u65b0\u4ece\u57fa\u7840\u5f00\u59cb\u5b66\u4e60\uff0c\u7136\u540e\u518d\u56de\u6765\u6216\u8005\u5728\u5b66\u4e60\u8fc7\u7a0b\u4e2d\u67e5\u627e\u76f8\u5173\u5185\u5bb9\u3002<\/p>\n
\u56de\u5230index.js\uff0c\u7f16\u5199\u4ee3\u7801\u4ee5\u6e32\u67d3Column\u7ec4\u4ef6\u3002<\/p>\n
class<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> initialData<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>((<\/span>columnId<\/span>)<\/span> =><\/span> {<\/span>\r\n      const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n      const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n      \/\/ \u8ffd\u8a18<\/span>\r\n      return<\/span> <<\/span>Column<\/span> key<\/span>=<\/span>{<\/span>column<\/span>.<\/span>id<\/span>}<\/span> column<\/span>=<\/span>{<\/span>column<\/span>}<\/span> tasks<\/span>=<\/span>{<\/span>tasks<\/span>}<\/span> \/><\/span> \r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\u4ee5\u4e0b\u7565<\/span>\r\n<\/code><\/pre>\n
\u65e2\u5b9a\u3067\u306f\u7f3a\u5c11Column\u7ec4\u4ef6\uff0c\u56e0\u6b64\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u3002
\n\u73b0\u5728\u521b\u5efasrc\/Column.jsx\u6587\u4ef6\u3002<\/p>\n
src \r\n  |- initial-data.js\r\n  |- Column.jsx \/\/ \u65b0\u898f\u4f5c\u6210\r\n<\/code><\/pre>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u8ba9\u6211\u4eec\u5728index.js\u4e2d\u5bfc\u5165Column\u7ec4\u4ef6\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> initialData<\/span> from<\/span> '<\/span>.\/initial-data<\/span>'<\/span>\r\nimport<\/span> Column<\/span> from<\/span> '<\/span>.\/Column<\/span>'<\/span>  \/\/\u8ffd\u8a18<\/span>\r\n\r\n\u4ee5\u4e0b\u7565<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u6211\u76f8\u4fe1\u6d4f\u89c8\u5668\u4e2d\u7684\u9519\u8bef\u4f1a\u6d88\u5931\uff0c\u5f85\u529e\u4e8b\u9879\u4f1a\u663e\u793a\u51fa\u6765\u3002<\/p>\n
\u4f7f\u7528styled-components\u6765\u5e94\u7528\u6837\u5f0f\u3002<\/h2>\n
\u9996\u5148\uff0c\u6211\u4eec\u8981\u5728\u9879\u76ee\u4e2d\u5b89\u88c5styled-components\u3002<\/p>\n
$ npm install styled-components \r\n<\/code><\/pre>\n
\u4e3a\u4e86\u5728\u6d4f\u89c8\u5668\u4e4b\u95f4\u4fdd\u6301\u4e00\u81f4\u7684\u6837\u5f0f\uff0c\u8bf7\u8003\u8651\u5f15\u5165\u91cd\u7f6eCSS\u3002<\/p>\n
$ npm install @atlaskit\/css-reset \r\n<\/code><\/pre>\n
\u5982\u679c\u5b89\u88c5\u6210\u529f\uff0c\u9996\u5148\u56de\u5230index.js\uff0c\u7136\u540e\u9010\u6b65\u5bfc\u5165\u91cd\u7f6eCSS\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>@atlaskit\/css-reset<\/span>'<\/span> \/\/ \u8ffd\u52a0<\/span>\r\nimport<\/span> initialData<\/span> from<\/span> '<\/span>.\/initial-data<\/span>'<\/span>\r\nimport<\/span> Column<\/span> from<\/span> '<\/span>.\/Column<\/span>'<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\u6211\u8ba4\u4e3a\u98ce\u683c\u53d8\u4e86\u3002<\/p>\n
\u4e0b\u4e00\u6b65\u6211\u4eec\u5c06\u4f7f\u7528styled-components\u6765\u5e94\u7528\u6837\u5f0f\u3002
\n\u9996\u5148\u5bfc\u5165styled-components\uff0c\u5e76\u5b9a\u4e49\u8981\u5e94\u7528\u6837\u5f0f\u7684\u7ec4\u4ef6\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n\r\nconst<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>``<\/span> \/\/ \u5168\u4f53\u3092\u56f2\u3080div<\/span>\r\nconst<\/span> Title<\/span> =<\/span> styled<\/span>.<\/span>h3<\/span>``<\/span> \/\/ Todo\u306a\u3069\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u8868\u3059h3<\/span>\r\nconst<\/span> TaskList<\/span> =<\/span> styled<\/span>.<\/span>ul<\/span>``<\/span> \/\/ Task\u3092\u56f2\u3080ul<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\u5c06\u8981\u5e94\u7528\u4e8e\u6bcf\u4e2a\u7ec4\u4ef6\u7684\u6837\u5f0f\u5199\u4e0b\u6765\u3002<\/p>\n
const<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  margin: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n`<\/span>\r\nconst<\/span> Title<\/span> =<\/span> styled<\/span>.<\/span>h3<\/span>`\r\n  padding: 8px;\r\n`<\/span>\r\nconst<\/span> TaskList<\/span> =<\/span> styled<\/span>.<\/span>ul<\/span>`\r\n  padding: 8px;\r\n`<\/span>\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u5c06\u5176\u5199\u5165JSX\u4e2d\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\n\r\nconst<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  margin: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n`<\/span>\r\nconst<\/span> Title<\/span> =<\/span> styled<\/span>.<\/span>h3<\/span>`\r\n  padding: 8px;\r\n`<\/span>\r\nconst<\/span> TaskList<\/span> =<\/span> styled<\/span>.<\/span>ul<\/span>`\r\n  padding: 8px;\r\n  list-style: none;\r\n`<\/span>\r\nexport<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>Container<\/span>><\/span>\r\n        <<\/span>Title<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>Title<\/span>><\/span>\r\n        <<\/span>TaskList<\/span>><\/span>\u3053\u3053\u306b\u30bf\u30b9\u30af\u304c\u5165\u308b<\/<\/span>TaskList<\/span>><\/span>\r\n      <\/<\/span>Container<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u4ee5\u9002\u7528\u7684\u6837\u5f0f\u663e\u793a\u5728\u6d4f\u89c8\u5668\u4e2d\u3002
\n\u8fd9\u662f\u57fa\u672c\u7684styled-components\u7684\u4f7f\u7528\u65b9\u6cd5\u3002<\/p>\n
\u9010\u4e2a\u663e\u793aTodo<\/h2>\n
\u6211\u5011\u5c07\u5728\u9019\u500b\u5340\u584a\u4e2d\u986f\u793a\u5f85\u8fa6\u4e8b\u9805\u7684\u8655\u7406\u904e\u7a0b\u3002<\/p>\n
import<\/span> Task<\/span> from<\/span> '<\/span>.\/Task<\/span>'<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>Container<\/span>><\/span>\r\n        <<\/span>Title<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>Title<\/span>><\/span>\r\n        <<\/span>TaskList<\/span>><\/span>\r\n         {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>tasks<\/span>.<\/span>map<\/span>(<\/span>task<\/span> =><\/span> <<\/span>Task<\/span> key<\/span>=<\/span>{<\/span>task<\/span>.<\/span>id<\/span>}<\/span> task<\/span>=<\/span>{<\/span>task<\/span>}<\/span> \/><\/span>}<\/span>  \/\/\u8ffd\u52a0\r\n        <\/<\/span>TaskList<\/span>><\/span>\r\n      <\/<\/span>Container<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aTask\u7684\u7ec4\u4ef6\u3002<\/p>\n
src \r\n  |- initial-data.js\r\n  |- Column.jsx\r\n  |- Task.jsx \/\/ \u65b0\u898f\u8ffd\u52a0\r\n<\/code><\/pre>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\n\r\nconst<\/span> List<\/span> =<\/span> styled<\/span>.<\/span>li<\/span>`\r\n  padding: 8px;\r\n  margin-bottom: 8px;\r\n  border: 1px solid rightgray;\r\n  border-radius: 2px;\r\n`<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Task<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>List<\/span>><\/span>\r\n        {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>task<\/span>.<\/span>content<\/span>}<\/span>\r\n      <\/<\/span>List<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
\u4f7f\u7528react-beautiful-dnd\u8fdb\u884c\u5217\u8868\u6392\u5e8f\u3002<\/h2>\n
react-beautiful-dnd\u7684\u7b80\u4ecb<\/h3>\n
\"react-beautiful-dnd.gif\"<\/div>\n
\u7b2c\u4e00\u4e2a\u662fDragDropContext\u3002
\n\u8fd9\u662f\u4e00\u4e2a\u4f7f\u62d6\u653e\uff08\u4ee5\u4e0b\u7b80\u79f0dnd\uff09\u6210\u4e3a\u53ef\u80fd\u7684\u533a\u57df\uff0c\u662f\u6700\u5916\u5c42\u7684\u533a\u57df\uff0c\u7528\u4e8e\u8868\u8fbe\u201c\u8fd9\u4e2a\u533a\u57df\u53ef\u4ee5\u8fdb\u884cdnd\u64cd\u4f5c\u201d\u3002<\/p>\n
\u7b2c\u4e8c\u4e2a\u662f\u201c\u53ef\u62d6\u52a8(Droppable)\u201d\u3002\u5b83\u8868\u793a\u4e86\u53ef\u62d6\u52a8\u7684\u533a\u57df\u3002<\/p>\n
\u7b2c\u4e09\u4e2a\u9009\u9879\u662f\u53ef\u62d6\u52a8 (Draggable)\u3002\u5b83\u8868\u793a\u7684\u662f\u53ef\u62d6\u52a8\u7684\u533a\u57df\u3002<\/p>\n
\u901a\u8fc7\u56f4\u7ed5\u8fd9\u4e09\u4e2a\u7ec4\u4ef6\u6765\u5b9e\u73b0\u6240\u9700\u7684\u62d6\u653e\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u5b9e\u73b0\u201c\u4ece\u8fd9\u91cc\u5230\u8fd9\u91cc\u90fd\u53ef\u4ee5\u8fdb\u884c\u62d6\u653e\u201d\uff0c\u201c\u8fd9\u91cc\u662f\u53ef\u653e\u7f6e\u62d6\u52a8\u7269\u4f53\u7684\u4f4d\u7f6e\u201d\uff0c\u201c\u8fd9\u91cc\u662f\u53ef\u62d6\u52a8\u7684\u4f4d\u7f6e\u201d\u7b49\u529f\u80fd\u3002
\n\u987a\u4fbf\u63d0\u4e00\u4e0b\uff0c\u867d\u7136\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\u65e0\u6cd5\u5b9e\u73b0\u62d6\u52a8\u529f\u80fd\uff0c\u4f46\u6839\u636e\u5b98\u65b9github\u7684\u6559\u7a0b\u8fdb\u884c\u64cd\u4f5c\uff0c\u4f3c\u4e4e\u53ef\u4ee5\u8ba9\u8fd9\u4e2a\u533a\u57df\u4e5f\u80fd\u62d6\u52a8\u3002
\n\u5173\u4e8e\u8fd9\u65b9\u9762\u7684\u5185\u5bb9\uff0c\u6211\u4eec\u6253\u7b97\u4ee5\u540e\u518d\u505a\u3002<\/p>\n
\u5728\u4e2d\u6587\u4e2d\u5b9e\u73b0react-beautiful-dnd\u3002<\/h3>\n
\u9996\u5148\uff0c\u5c06react-beautiful-dnd\u5f15\u5165\u5230\u9879\u76ee\u4e2d\u3002<\/p>\n
$ npm install react-beautiful-dnd\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u6211\u4eec\u5c06\u8fdb\u884c\u5bfc\u5165\u3002
\n\u9700\u8981\u5bfc\u5165\u7684\u6587\u4ef6\u662f\u9700\u8981\u5305\u56f4\u5728\u5143\u7d20\u4e2d\u7684\u6587\u4ef6\u3002
\n\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5c06\u5176\u5bfc\u5165\u5230index.js\u6587\u4ef6\u4e2d\u3002<\/p>\n
import<\/span> {<\/span> DragDropContext<\/span> }<\/span> from<\/span> \"<\/span>react-beautiful-dnd<\/span>\"<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u7136\u540e\uff0c\u8ba9\u6211\u4eec\u7528\u6765\u56f4\u7ed5\u60f3\u8981\u8fdb\u884c\u62d6\u653e\u7684\u533a\u57df\u3002<\/p>\n
\r\nclass<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> initialData<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>DragDropContext<\/span>><\/span>\r\n      {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>(<\/span>columnId<\/span> =><\/span> {<\/span>\r\n        const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n        const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n        return<\/span> <<\/span>Column<\/span> key<\/span>=<\/span>{<\/span>column<\/span>.<\/span>id<\/span>}<\/span> column<\/span>=<\/span>{<\/span>column<\/span>}<\/span> tasks<\/span>=<\/span>{<\/span>tasks<\/span>}<\/span> \/<\/span>>\r\n<\/span>      })}<\/span>\r\n      <<\/span>\/DragDropContext<\/span>>\r\n<\/span>    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
\u5728\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4e09\u4e2a\u56de\u8c03\u51fd\u6570\u3002<\/p>\n
\u30fbonDragStart: \u5f53\u5f00\u59cb\u62d6\u52a8\u65f6\u88ab\u8c03\u7528\uff08\u5f53\u7269\u4f53\u88ab\u62ff\u8d77\u65f6\uff09
\n\u30fbonDragUpdate: \u5f53\u62d6\u52a8\u8fc7\u7a0b\u4e2d\u6709\u4efb\u4f55\u53d8\u5316\u53d1\u751f\u65f6\u88ab\u8c03\u7528\uff0c\u4f8b\u5982\u5c06\u7269\u4f53\u79fb\u52a8\u5230\u65b0\u4f4d\u7f6e
\n\u30fbonDragEnd: \u5f53\u62d6\u52a8\u7ed3\u675f\u65f6\u88ab\u8c03\u7528\uff08\u5f53\u7269\u4f53\u88ab\u653e\u4e0b\u65f6\uff09<\/p>\n
\u5728\u8fd9\u4e2a\u56de\u8c03\u51fd\u6570\u4e2d\u4e00\u5b9a\u4f1a\u9700\u8981\u7684\u662fonDragEnd\u3002<\/p>\n
\r\nclass<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> initialData<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>DragDropContext<\/span> \/\/ \uff13\u3064\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u53d6\u308c\u308b<\/span>\r\n        onDragStart<\/span>=<\/span>{}<\/span> \/\/ \u958b\u59cb\u6642<\/span>\r\n        onDragUpdate<\/span>=<\/span>{}<\/span> \/\/ \u9014\u4e2d<\/span>\r\n        onDragEnd<\/span>=<\/span>{}<\/span> \/\/ \u7d42\u4e86\u6642 **\u7d76\u5bfe\u306b\u5fc5\u8981**<\/span>\r\n      ><\/span>\r\n      {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>(<\/span>columnId<\/span> =><\/span> {<\/span>\r\n        const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n        const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n        return<\/span> <<\/span>Column<\/span> key<\/span>=<\/span>{<\/span>column<\/span>.<\/span>id<\/span>}<\/span> column<\/span>=<\/span>{<\/span>column<\/span>}<\/span> tasks<\/span>=<\/span>{<\/span>tasks<\/span>}<\/span> \/<\/span>>\r\n<\/span>      })}<\/span>\r\n      <<\/span>\/DragDropContext<\/span>>\r\n<\/span>    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u4fdd\u7559onDragEnd\u7684\u60c5\u51b5\u4e0b\uff0c\u5220\u9664\u5176\u4ed6\u4e24\u4e2a\u56de\u8c03\u51fd\u6570\u3002\u7136\u540e\uff0c\u5728onDragEnd\u4e2d\uff0c\u5c06\u5728index.js\u4e2d\u5b9a\u4e49\u7684\u65b9\u6cd5\u4f20\u9012\u7ed9\u5b83\u3002\u7136\u540e\u8fd4\u56de\u8fd9\u91cc\uff0c\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u6b65\u3002<\/p>\n
const<\/span> onDragEnd<\/span> =<\/span> result<\/span> =><\/span> {}<\/span>\r\n\r\nrender<\/span>()<\/span> {<\/span>\r\n  return<\/span>(<\/span>\r\n    ...<\/span>\r\n    <<\/span>DragDropContext<\/span> onDragEnd<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDragEnd<\/span>}<\/span>><\/span>\r\n    ...<\/span>\r\n    <<\/span>\/DragDropContext<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u4e0b\u4e00\u6b65\uff0c\u6211\u4eec\u5c06\u5728\u4e2d\u653e\u7f6e\u53ef\u653e\u7f6e\u7684\u533a\u57df\u3002\u8fd9\u4e2a\u53ef\u653e\u7f6e\u7684\u533a\u57df\u662fColumn\u7ec4\u4ef6\u3002<\/p>\n
import<\/span> {<\/span> Droppable<\/span> }<\/span> from<\/span> \"<\/span>react-beautiful-dnd<\/span>\"<\/span>;<\/span>\r\n<\/code><\/pre>\n
export<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>Container<\/span>><\/span>\r\n        <<\/span>Title<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>Title<\/span>><\/span>\r\n        <<\/span>Droppable<\/span>><\/span> \/\/\u3053\u3053\u3068\u8ffd\u52a0\r\n          <<\/span>TaskList<\/span>><\/span>\r\n            {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>tasks<\/span>.<\/span>map<\/span>(<\/span>task<\/span> =><\/span> <<\/span>Task<\/span> key<\/span>=<\/span>{<\/span>task<\/span>.<\/span>id<\/span>}<\/span> task<\/span>=<\/span>{<\/span>task<\/span>}<\/span> \/>)<\/span>}<\/span>\r\n          <\/<\/span>TaskList<\/span>><\/span>\r\n        <\/<\/span>Droppable<\/span>><\/span> \/\/\u3053\u3053\u306b\u8ffd\u52a0\r\n      <\/<\/span>Container<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u4e2a\u53ef\u62d6\u62fd\u5143\u7d20\u9700\u8981\u4e00\u4e2a\u552f\u4e00\u7684ID\u3002\u8fd9\u662f\u56e0\u4e3a\u5f53\u5143\u7d20\u5728\u4e0d\u540c\u7684\u5217\u4e4b\u95f4\u79fb\u52a8\u65f6\uff0c\u9700\u8981\u8bc6\u522b\u5b83\u5c5e\u4e8e\u54ea\u4e00\u5217\u3002<\/p>\n
\u5047\u8bbe\u6211\u4eec\u5c06Todo\u7684ID\u8bbe\u4e3acolumn-1\uff0cdone\u7684ID\u8bbe\u4e3acolumn-2\u3002
\n\u5f53\u6211\u4eec\u6ce8\u518c\u4e00\u4e2a\u201c\u5783\u573e\u6e05\u7406\u201d\u7684Todo\u65f6\uff0c\u7531\u4e8e\u5f53\u524d\u5783\u573e\u6e05\u7406\u4efb\u52a1\u5728Todo\u4e2d\uff0c\u6240\u4ee5\u7528ID\u8868\u793a\u5c31\u662f\u201c\u5728column-1\u7684\u5217\u4e2d\u6709\u4e00\u4e2a\u5783\u573e\u6e05\u7406\u4efb\u52a1\u201d\u3002<\/p>\n
\u5047\u8bbe\u60a8\u5df2\u5b8c\u6210\u5783\u573e\u5012\u6389\u5e76\u5c06\u4efb\u52a1\u4ece\u201c\u5f85\u529e\u4e8b\u9879\u201d\u62d6\u653e\u5230\u201c\u5df2\u5b8c\u6210\u201d\u680f\u3002\u7528ID\u8868\u793a\uff0c\u8fd9\u610f\u5473\u7740\u201c\u5728column-1\u5217\u4e2d\u7684\u5783\u573e\u5012\u6389\u4efb\u52a1\u5df2\u79fb\u52a8\u5230column-2\u201d\u3002<\/p>\n
\u5982\u679c\u5b58\u5728ID\u7684\u8bdd\uff0c\u5728\u79fb\u52a8\u5b83\u7684\u5730\u65b9\u4f1a\u4ea7\u751f\u91cd\u590d\uff0c\u7ed3\u679c\u5c31\u65e0\u6cd5\u77e5\u9053\u5b83\u79fb\u52a8\u5230\u54ea\u91cc\u4e86\u3002\u56e0\u6b64\uff0c\u9700\u8981\u8bbe\u7f6e\u4e00\u4e2a\u552f\u4e00\u7684ID\u3002
\n\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5c06\u5229\u7528\u5728inisial-data.js\u6587\u4ef6\u4e2d\u7684columns\u5b57\u6bb5\u4e2d\u8bbe\u7f6e\u7684\u503ccolumn-1\u3002
\n\u5c06ID\u8bbe\u7f6e\u7ed9dorpppableId\u3002<\/p>\n
<<\/span>Droppable<\/span> droppableId<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n<\/<\/span>Droppable<\/span>><\/span>\r\n<\/code><\/pre>\n
\u6b64\u5916\uff0c\u60a8\u9700\u8981\u5c06\u5176\u5305\u88c5\u6210\u4e00\u4e2a\u5177\u6709provided\u53c2\u6570\u7684\u51fd\u6570\u3002
\n\u6839\u636eprovided\u53c2\u6570\u7684\u503c\uff0c\u60a8\u53ef\u4ee5\u8ffd\u8e2a\u54ea\u4e2a\u9879\u76ee\u88ab\u79fb\u52a8\u5230\u54ea\u4e2a\u4f4d\u7f6e\u3002
\n\uff08\u975e\u5e38\u62b1\u6b49\u65e0\u6cd5\u8be6\u7ec6\u89e3\u91ca\u8fd9\u4e2a\u8fc7\u7a0b\uff0c\u6211\u4f1a\u52aa\u529b\u5b66\u4e60\u7684\u3002\u6709\u5173ref\u7684\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u53c2\u8003\u6b64\u5904\u3002\uff09<\/p>\n
\u7136\u540e\uff0c\u6211\u4eec\u9700\u8981\u518d\u6dfb\u52a0\u4e00\u4e2a\u91cd\u8981\u7684\u5360\u4f4d\u7b26\u3002
\n\u8fd9\u662f\u4e3a\u4e86\u589e\u52a0\u53ef\u4ee5\u62d6\u653e\u7684\u533a\u57df\u800c\u5fc5\u9700\u7684\u3002\u5360\u4f4d\u7b26\u5e94\u4f5c\u4e3a\u6307\u5b9a\u4e3a\u53ef\u62d6\u653e\u7684\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u6dfb\u52a0\u3002<\/p>\n
\u53e6\u5916\uff0c\u6211\u4eec\u6b63\u5728\u4f7f\u7528map\u51fd\u6570\u5bf9tasks\u8fdb\u884c\u8fed\u4ee3\uff0c\u4e3a\u4e86\u786e\u5b9a\u8fd9\u4e2atask\u6240\u5728\u7684\u7d22\u5f15\uff0c\u6211\u4eec\u9700\u8981\u5c06\u7d22\u5f15\u4f5c\u4e3a\u7b2c\u4e8c\u4e2a\u53c2\u6570\u8bbe\u7f6e\uff0c\u5e76\u5c06\u5176\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002<\/p>\n
export<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>Container<\/span>><\/span>\r\n        <<\/span>Title<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>Title<\/span>><\/span>\r\n        <<\/span>Droppable<\/span> droppableId<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n        {<\/span>(<\/span>provided<\/span>)<\/span> =><\/span> (<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n          <<\/span>TaskList<\/span> \r\n            ref<\/span>=<\/span>{<\/span>provided<\/span>.<\/span>innerRef<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n            {<\/span>...<\/span>provided<\/span>.<\/span>droppableProps<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n          ><\/span>\r\n            {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>tasks<\/span>.<\/span>map<\/span>((<\/span>task<\/span>,<\/span> index<\/span>)<\/span> =><\/span> <<\/span>Task<\/span> key<\/span>=<\/span>{<\/span>task<\/span>.<\/span>id<\/span>}<\/span> task<\/span>=<\/span>{<\/span>task<\/span>}<\/span> index<\/span>=<\/span>{<\/span>index<\/span>}<\/span>\/>)<\/span>}<\/span> \/\/ index\u3092\u8ffd\u52a0\r\n            {<\/span>provided<\/span>.<\/span>placeholder<\/span>}<\/span> \/\/ \u8ffd\u52a0\r\n          <\/<\/span>TaskList<\/span>><\/span>\r\n        )<\/span>}<\/span>\r\n        <\/<\/span>Droppable<\/span>><\/span>\r\n      <\/<\/span>Container<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u7f16\u5199\u4ee3\u7801\u4ee5\u4f7fTask\u7ec4\u4ef6\u53ef\u62d6\u52a8\u3002
\n\u9996\u5148\u662f\u5bfc\u5165\u90e8\u5206\uff0c\u7136\u540e\u7528\u5c06\u5143\u7d20\u5305\u56f4\u8d77\u6765\uff0c\u5e76\u8bbe\u7f6edraggableId\u3002<\/p>\n
\u6b64\u5916\uff0c\u5c06\u5176\u5c01\u88c5\u4e3a\u4e00\u4e2a\u5177\u6709\u4e0eColumn\u7ec4\u4ef6\u76f8\u540c\u7684provided\u53c2\u6570\u7684\u51fd\u6570\uff0c\u4ee5\u4fbf\u53ef\u4ee5\u8fdb\u884c\u8ddf\u8e2a\u3002
\n\u6b64\u6b21\u65b0\u589e\u4e86{…provided.dragHandleProps}\u8fd9\u53e5\u8bdd\u3002\u901a\u8fc7\u6dfb\u52a0\u8fd9\u53e5\u8bdd\uff0c\u53ef\u4ee5\u4f7f\u53ef\u62d6\u52a8\u7684\u7ec4\u4ef6\u53ef\u4ee5\u88ab\u62d6\u52a8\u3002<\/p>\n
import<\/span> {<\/span> Draggable<\/span> }<\/span> from<\/span> '<\/span>react-beautiful-dnd<\/span>'<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Task<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>Draggable<\/span> \r\n        draggableId<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>task<\/span>.<\/span>id<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n        index<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>index<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n      ><\/span>\r\n      {<\/span>(<\/span>provided<\/span>)<\/span> =><\/span> (<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n        <<\/span>List<\/span> \r\n          ref<\/span>=<\/span>{<\/span>provided<\/span>.<\/span>innerRef<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n          {<\/span>...<\/span>provided<\/span>.<\/span>draggableProps<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n          {<\/span>...<\/span>provided<\/span>.<\/span>dragHandleProps<\/span>}<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n        ><\/span>\r\n          {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>task<\/span>.<\/span>content<\/span>}<\/span>\r\n        <\/<\/span>List<\/span>><\/span>\r\n      )<\/span>}<\/span>\r\n      <\/<\/span>Draggable<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u80fd\u591f\u63cf\u8ff0\u5230\u6b64\uff0c\u6211\u8ba4\u4e3a\u53ef\u4ee5\u5b9e\u73b0\u5143\u7d20\u7684\u62d6\u62fd\u529f\u80fd\u3002\u4f46\u662f\uff0c\u5b58\u5728\u4e00\u4e2a\u95ee\u9898\u3002\u8fd9\u4e2a\u95ee\u9898\u662f\u62d6\u62fd\u7684\u5143\u7d20\u4f1a\u81ea\u52a8\u56de\u5230\u539f\u6765\u7684\u4f4d\u7f6e\u3002\u4e0b\u9762\u6211\u4eec\u6765\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002<\/p>\n
\u4f7f\u7528onDragEnd\u56de\u8c03\u51fd\u6570\u5c06\u5217\u8868\u6392\u5e8f\u6301\u4e45\u5316\u3002<\/h2>\n
\u63a5\u4e0b\u6765\u56de\u5230index.js\u6587\u4ef6\uff0c\u5728onDragEnd\u56de\u8c03\u51fd\u6570\u4e2d\u8fdb\u884c\u5904\u7406\u3002<\/p>\n
\u5173\u4e8e\u7ed3\u679c<\/h3>\n
\u5728\u4ecb\u7ecd\u4e4b\u524d\uff0c\u6211\u5c06\u89e3\u91ca\u4e00\u4e0bresult\u4e2d\u5305\u542b\u7684\u503c\u3002
\n\u8fd9\u6bb5\u4ee3\u7801\u662f\u4e00\u4e2a\u4f8b\u5b50\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u521b\u5efa\u65b0\u6587\u4ef6\uff0c\u4f46\u662f\u5982\u679c\u4f60\u81ea\u5df1\u4f7f\u7528console.log(result)\u7b49\u51fd\u6570\u6765\u786e\u8ba4\u5176\u4e2d\u7684\u5185\u5bb9\uff0c\u4f60\u4f1a\u66f4\u52a0\u7406\u89e3\u5b83\uff08\u5c31\u50cf\u6211\u4e00\u6837\uff09\u3002<\/p>\n
const<\/span> result<\/span> =<\/span> {<\/span>\r\n  draggableId<\/span>:<\/span> '<\/span>task-1<\/span>'<\/span>,<\/span>\r\n  type<\/span>:<\/span> '<\/span>TYPE<\/span>'<\/span>,<\/span>\r\n  reason<\/span>:<\/span> '<\/span>DROP<\/span>'<\/span>,<\/span>\r\n  source<\/span>:<\/span> {<\/span>\r\n    droppableId<\/span>:<\/span> '<\/span>column-1<\/span>'<\/span>,<\/span>\r\n    index<\/span>:<\/span> 0<\/span>,<\/span>\r\n  },<\/span>\r\n  destination<\/span>:<\/span> {<\/span>\r\n    droppableId<\/span>:<\/span> '<\/span>column-2<\/span>'<\/span>,<\/span>\r\n    index<\/span>:<\/span> 1<\/span>,<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u4e2aresult\u5bf9\u8c61\u5305\u542b\u4e86onDragEnd\u7684\u7ed3\u679c\u4fe1\u606f\uff0c\u5373\u62d6\u52a8\u7ed3\u675f\u540e\u7684\u6570\u636e\u3002\u4e0b\u9762\u53ea\u5bf9\u91cd\u8981\u5c5e\u6027\u8fdb\u884c\u89e3\u91ca\u3002<\/p>\n
\u30fb\u53ef\u62d6\u52a8\u5143\u7d20\u7684id\uff1adraggableId
\n\u30fb\u6e90droppableId: \u5728\u653e\u7f6e\u524d\u7684\u5217id
\n\u30fb\u6e90index: \u5728\u653e\u7f6e\u524d\u7684\u7d22\u5f15
\n\u30fb\u76ee\u7684droppableId: \u5728\u653e\u7f6e\u540e\u7684\u5217id
\n\u30fb\u76ee\u7684index: \u5728\u653e\u7f6e\u540e\u7684\u7d22\u5f15<\/p>\n
\u901a\u8fc7\u4f7f\u7528\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u5b9e\u73b0\u4ea4\u4e92\u7684\u6301\u4e45\u5316\u3002
\n\u4ee5\u4e00\u79cd\u56fe\u50cf\u7684\u65b9\u5f0f\uff0c\u83b7\u53d6\u88ab\u62d6\u52a8\u5143\u7d20\u4f4d\u4e8e\u54ea\u4e2a\u5217\u7684\u54ea\u4e2a\u7d22\u5f15\uff0c\u4ee5\u53ca\u88ab\u62d6\u653e\u5230\u54ea\u4e2a\u5217\u7684\u54ea\u4e2a\u7d22\u5f15\u3002\u7136\u540e\uff0c\u901a\u8fc7\u6539\u53d8\u72b6\u6001\uff0cReact\u68c0\u6d4b\u5230\u72b6\u6001\u7684\u53d8\u5316\uff0c\u5e76\u8fdb\u884cDOM\u7684\u91cd\u5199\u7b49\u64cd\u4f5c\u3002<\/p>\n
\u6211\u4eec\u6765\u7f16\u5199onDragEnd\u51fd\u6570\u7684\u5904\u7406\u4ee3\u7801\u5427\u3002<\/p>\n
\u62d6\u62fd\u7ed3\u675f\u7684\u5904\u7406\u65b9\u5f0f<\/h3>\n
\u8bf7\u53c2\u8003\u6211\u7684\u6ce8\u91ca\u5e76\u5c1d\u8bd5\u7f16\u5199\u4ee3\u7801\uff0c\u6211\u5c06\u5728\u5904\u7406\u8fc7\u7a0b\u4e2d\u9010\u6b65\u63d0\u4f9b\u3002<\/p>\n
onDragEnd<\/span> =<\/span> result<\/span> =><\/span> {<\/span>\r\n    const<\/span> {<\/span> draggableId<\/span>,<\/span> source<\/span>,<\/span> destination<\/span> }<\/span> =<\/span> result<\/span>\r\n\r\n    \/\/ destination: \u30c9\u30ed\u30c3\u30d7\u5148 \u304c\u306a\u3044\u5834\u5408\u306b\u306f\u51e6\u7406\u3092\u7d42\u4e86<\/span>\r\n    if<\/span>(<\/span>!<\/span>destination<\/span>)<\/span> {<\/span>\r\n      return<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ \u30c9\u30ed\u30c3\u30d7\u524d\u5f8c\u306eID\u304c\u540c\u3058\u3067\u3001\u30c9\u30ed\u30c3\u30d7\u524d\u5f8c\u306eindex\u304c\u540c\u3058\u5834\u5408\u306b\u306f\u51e6\u7406\u3092\u7d42\u4e86<\/span>\r\n    if<\/span>(<\/span>\r\n      destination<\/span>.<\/span>droppableId<\/span> ===<\/span> source<\/span>.<\/span>droppableId<\/span> &&<\/span>\r\n      destination<\/span>.<\/span>index<\/span> ===<\/span> source<\/span>.<\/span>index<\/span>\r\n    )<\/span> {<\/span> \r\n      return<\/span> \r\n    }<\/span>\r\n\r\n    \/\/ dnd\u3057\u305f\u8981\u7d20\u30ab\u30e9\u30e0Id\u304b\u3089\u3001\u5143\u306e\u5834\u6240\u306b\u3042\u3063\u305f\u30ab\u30e9\u30e0\u3092\u53d6\u5f97\uff08state\uff09<\/span>\r\n    const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>source<\/span>.<\/span>droppableId<\/span>]<\/span>\r\n    \/\/ taskIds\u306e\u30b3\u30d4\u30fc<\/span>\r\n    const<\/span> newTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>column<\/span>.<\/span>taskIds<\/span>)<\/span>\r\n    \/\/ \u914d\u5217\u304b\u3089\u30c9\u30e9\u30c3\u30af\u3057\u305f\u8981\u7d20\u304b\u30891\u3064\u524a\u9664\u3059\u308b<\/span>\r\n    newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span>\r\n    \/\/ \u30c9\u30ed\u30c3\u30d7\u3057\u305f\u5834\u6240\u306b\u3001\u30c9\u30ed\u30c3\u30d7\u3057\u305f\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/span>\r\n    newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span>\r\n\r\n    \/\/ column\u3092\u30b3\u30d4\u30fc\u3057\u3001taskIds\u3092\u4e0a\u66f8\u304d<\/span>\r\n    const<\/span> newColumn<\/span> =<\/span> {<\/span>\r\n      ...<\/span>column<\/span>,<\/span> \r\n      taskIds<\/span>:<\/span> newTasksIds<\/span>,<\/span>\r\n   }<\/span>\r\n\r\n    \/\/ state\u3092\u30b3\u30d4\u30fc\u3057\u3001columns\u3092\u4e0a\u66f8\u304d<\/span>\r\n    const<\/span> newState<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span>\r\n      columns<\/span>:<\/span> {<\/span>\r\n        ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span>\r\n        [<\/span>newColumn<\/span>.<\/span>id<\/span>]:<\/span> newColumn<\/span>\r\n      },<\/span>\r\n    }<\/span> \r\n\r\n    \/\/ state\u306e\u66f4\u65b0<\/span>\r\n    this<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u4f60\u5df2\u7ecf\u5b9e\u73b0\u5230\u8fd9\u4e00\u6b65\uff0c\u8bf7\u786e\u8ba4\u4e00\u4e0b\u5e94\u7528\u3002\u4f60\u4f1a\u53d1\u73b0\u4efb\u52a1\u7684\u79fb\u52a8\u5df2\u7ecf\u88ab\u6c38\u4e45\u4fdd\u5b58\u4e86\u3002
\n\u8fd9\u6837\uff0c\u4f60\u6682\u65f6\u5b8c\u6210\u4e86\u4e00\u4e2a\u53ea\u80fd\u62d6\u653e\u4e00\u4e2a\u5217\u7684todo\u5e94\u7528\u7a0b\u5e8f\u7684\u5236\u4f5c\u3002
\n\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4e00\u4e9b\u65b9\u6cd5\u6765\u66f4\u52a0\u7f8e\u89c2\u5730\u5c55\u793a\u62d6\u653e\u529f\u80fd\u3002<\/p>\n
\u4f7f\u7528 react-beautiful-dnd \u7684\u5feb\u7167\u6765\u66f4\u6539\u62d6\u66f3\u8fc7\u7a0b\u4e2d\u7684\u6837\u5f0f\u3002<\/h2>\n
Draggable\u548cDroppable\u6709\u5404\u81ea\u7684\u5bf9\u8c61\uff0c\u79f0\u4e3asnapshot\u3002snapshot\u5305\u542b\u4fbf\u5229\u7684\u5c5e\u6027\uff0c\u53ef\u4ee5\u7528\u6765\u6539\u53d8\u62d6\u52a8\u8fc7\u7a0b\u4e2d\u7684\u6837\u5f0f\u3002<\/p>\n
\u5feb\u7167\u5c5e\u6027\u7684\u8bf4\u660e<\/h3>\n
\u73b0\u5728\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u5c5e\u6027\u3002<\/p>\n
\/\/ Draggable<\/span>\r\nconst<\/span> draggableSnapshot<\/span> =<\/span> {<\/span>\r\n  isDragging<\/span>:<\/span> boolean<\/span>,<\/span>\r\n  draggingOver<\/span>:<\/span> '<\/span>column-1<\/span>'<\/span>  \r\n}<\/span>\r\n\r\n\/\/ Droppable<\/span>\r\nconst<\/span> droppableSnapshot<\/span> =<\/span> {<\/span>\r\n  isDraggingOver<\/span>:<\/span> boolean<\/span>,<\/span>\r\n  draggingOverWith<\/span>:<\/span> '<\/span>task-1<\/span>'<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u662f\u5206\u522b\u8bbe\u7f6e\u5728\u53ef\u62d6\u62fd\u7ec4\u4ef6\u548c\u53ef\u653e\u7f6e\u7ec4\u4ef6\u7684\u5feb\u7167\u3002<\/p>\n
\u9996\u5148\uff0c\u5bf9\u4e8e\u53ef\u62d6\u52a8\u7684\u5feb\u7167\uff08draggableSnapshot\uff09\u4e2d\u7684isDragging\u5c5e\u6027\uff0c\u5b83\u4f1a\u53d6\u4e00\u4e2a\u5e03\u5c14\u503c\u4f5c\u4e3a\u503c\u3002\u5f53\u53ef\u62d6\u52a8\u7ec4\u4ef6\u6b63\u5728\u88ab\u62d6\u52a8\u65f6\uff0c\u8be5\u503c\u4f1a\u53d8\u4e3atrue\u3002\u5728\u672c\u5e94\u7528\u4e2d\uff0c\u5b83\u8868\u793a\u4e86\u79fb\u52a8\u4efb\u52a1\u7684\u65f6\u673a\u3002
\n\u63a5\u4e0b\u6765\uff0c\u5bf9\u4e8e\u53ef\u62d6\u52a8\u5feb\u7167\uff08draggableSnapshot\uff09\u4e2d\u7684draggingOver\u5c5e\u6027\uff0c\u5f53\u53ef\u62d6\u52a8\u7ec4\u4ef6\u4f4d\u4e8e\u53ef\u63a5\u53d7\u62d6\u653e\u7684\u7ec4\u4ef6\u4e0a\u65f6\uff0c\u8be5\u5c5e\u6027\u503c\u5c06\u6210\u4e3a\u53ef\u63a5\u53d7\u62d6\u653e\u7ec4\u4ef6\u7684ID\u3002
\n\u53e6\u5916\uff0c\u5f53\u53ef\u62d6\u52a8\u7ec4\u4ef6\u4f4d\u4e8e\u4e0d\u53ef\u63a5\u53d7\u62d6\u653e\u7684\u533a\u57df\u4e0a\u65f6\uff0c\u8be5\u5c5e\u6027\u503c\u5c06\u53d8\u4e3anull\u3002<\/p>\n
droppableSnapshot\u7684isDraggingOver\u5c5e\u6027\uff0c\u8868\u793a\u5f53\u53ef\u62d6\u62fd\u7ec4\u4ef6\u4f4d\u4e8e\u53ef\u653e\u7f6e\u7ec4\u4ef6\u4e4b\u4e0a\u65f6\u4e3atrue\u3002
\n\u53e6\u5916\uff0cdroppableSnapshot\u7684draggingOverWith\u5c5e\u6027\uff0c\u5b58\u50a8\u4e86\u4f4d\u4e8e\u53ef\u653e\u7f6e\u7ec4\u4ef6\u4e4b\u4e0a\u7684\u53ef\u62d6\u62fd\u7ec4\u4ef6\u7684id\u3002<\/p>\n
\u5c1d\u8bd5\u4f7f\u7528\u5feb\u7167\u529f\u80fd<\/h3>\n
\u4f7f\u7528\u65b9\u6cd5\u5f88\u7b80\u5355\u3002<\/p>\n
\u53ef\u62d6\u52a8\u7ec4\u4ef6\u7684\u5904\u7406<\/h4>\n
\u9996\u5148\uff0c\u5c06\u5176\u79fb\u52a8\u5230\u5141\u8bb8\u62d6\u62fd\u7684\u7ec4\u4ef6\u4e2d\uff0c\u5373\u79fb\u52a8\u5230Task.jsx\u4e2d\u3002\u5e76\u4e14\uff0c\u5728{(provided, snapshot) => (…)}\u4e4b\u540e\uff0c\u7ee7\u7eed\u6dfb\u52a0snapshot\u53c2\u6570\u5230provided\u4e4b\u540e\u3002<\/p>\n
\u7136\u540e\uff0c\u5bf9\u4e8e\u53ef\u62d6\u62fd\u7684\u7ec4\u4ef6\uff0c\u6dfb\u52a0isDragging={snapshot.isDragging}\u3002<\/p>\n
\u6700\u540e\uff0c\u5728styled-component\u4e2d\uff0c\u53ea\u9700\u901a\u8fc7\u6761\u4ef6\u5224\u65ad\u6765\u6539\u53d8\u989c\u8272\u5373\u53ef\u270c\ufe0f\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\nimport<\/span> {<\/span> Draggable<\/span> }<\/span> from<\/span> '<\/span>react-beautiful-dnd<\/span>'<\/span>\r\n\r\nconst<\/span> List<\/span> =<\/span> styled<\/span>.<\/span>li<\/span>`\r\n  padding: 8px;\r\n  margin-bottom: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n\u3000\/\/ \u6761\u4ef6\u5206\u5c90\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3055\u305b\u308b\r\n  background-color: <\/span>${<\/span>props<\/span> =><\/span> (<\/span>props<\/span>.<\/span>isDragging<\/span> ?<\/span> '<\/span>lightgreen<\/span>'<\/span> :<\/span> '<\/span>white<\/span>'<\/span> )}<\/span>;\r\n`<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Task<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>Draggable<\/span> draggableId<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>task<\/span>.<\/span>id<\/span>}<\/span> index<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>index<\/span>}<\/span>><\/span>\r\n      {<\/span>(<\/span>provided<\/span>,<\/span> snapshot<\/span>)<\/span> =><\/span> (<\/span> \/\/ \u3053\u3053\u306bsnapshot\u3092\u8ffd\u52a0<\/span>\r\n        <<\/span>List<\/span> \r\n          ref<\/span>=<\/span>{<\/span>provided<\/span>.<\/span>innerRef<\/span>}<\/span>\r\n          {<\/span>...<\/span>provided<\/span>.<\/span>draggableProps<\/span>}<\/span>\r\n          {<\/span>...<\/span>provided<\/span>.<\/span>dragHandleProps<\/span>}<\/span>\r\n          isDragging<\/span>=<\/span>{<\/span>snapshot<\/span>.<\/span>isDragging<\/span>}<\/span> \/\/ \u3053\u3053\u306bisDragging\u3092\u8ffd\u52a0<\/span>\r\n        ><\/span>\r\n          {<\/span>console<\/span>.<\/span>log<\/span>(<\/span>provided<\/span>.<\/span>dragHandleProps<\/span>)<\/span>}<\/span>\r\n          {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>task<\/span>.<\/span>content<\/span>}<\/span>\r\n        <\/<\/span>List<\/span>><\/span>\r\n      )<\/span>}<\/span>\r\n      <\/<\/span>Draggable<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5f53\u5728\u6d4f\u89c8\u5668\u4e2d\u786e\u8ba4\u65f6\uff0c\u6211\u8ba4\u4e3a\u62d6\u52a8\u65f6\u80cc\u666f\u8272\u4f1a\u53d8\u6210\u8f7b\u7eff\u8272\uff0c\u653e\u7f6e\u540e\u4f1a\u53d8\u4e3a\u767d\u8272\u3002
\n\u50cf\u8fd9\u6837\uff0c\u6211\u4eec\u53ef\u4ee5\u83b7\u53d6\u53ef\u62d6\u52a8\u7ec4\u4ef6\u7684\u72b6\u6001\u5e76\u6539\u53d8\u6837\u5f0f\u3002<\/p>\n
\u53ef\u62d6\u62fd\u7ec4\u4ef6\u7684\u5904\u7406\u65b9\u6cd5<\/h4>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u8f6c\u5411\u53ef\u62d6\u653e\u7684\u7ec4\u4ef6\uff0c\u4e5f\u5c31\u662fColumn.jsx\u3002
\n\u56e0\u4e3a\u4e4b\u524d\u7684\u6b65\u9aa4\u548c\u8fd9\u6b21\u5dee\u522b\u4e0d\u5927\uff0c\u6240\u4ee5\u6211\u4eec\u8df3\u8fc7\u89e3\u91ca\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> Task<\/span> from<\/span> '<\/span>.\/Task<\/span>'<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\nimport<\/span> {<\/span> Droppable<\/span> }<\/span> from<\/span> '<\/span>react-beautiful-dnd<\/span>'<\/span>\r\n\r\nconst<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  margin: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n`<\/span>\r\n\r\nconst<\/span> Title<\/span> =<\/span> styled<\/span>.<\/span>h3<\/span>`\r\n  padding: 8px;\r\n`<\/span>\r\n\r\nconst<\/span> TaskList<\/span> =<\/span> styled<\/span>.<\/span>ul<\/span>`\r\n  padding: 8px;\r\n  list-style: none;\r\n  min-height: 200px;\r\n  \/\/ \u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\r\n  transition: background-color 0.2s ease;\r\n  background-color: <\/span>${<\/span>props<\/span> =><\/span> (<\/span>props<\/span>.<\/span>isDraggingOver<\/span> ?<\/span> '<\/span>skyblue<\/span>'<\/span> :<\/span> '<\/span>white<\/span>'<\/span>)}<\/span>;\r\n`<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> Column<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>Container<\/span>><\/span>\r\n        <<\/span>Title<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>Title<\/span>><\/span>\r\n        <<\/span>Droppable<\/span> droppableId<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>column<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n        {<\/span>(<\/span>provided<\/span>,<\/span> snapshot<\/span>)<\/span> =><\/span> (<\/span> \/\/ snapshot\u3092\u8ffd\u52a0<\/span>\r\n          <<\/span>TaskList<\/span> \r\n            ref<\/span>=<\/span>{<\/span>provided<\/span>.<\/span>innerRef<\/span>}<\/span>\r\n            {<\/span>...<\/span>provided<\/span>.<\/span>droppableProps<\/span>}<\/span>\r\n            isDraggingOver<\/span>=<\/span>{<\/span>snapshot<\/span>.<\/span>isDraggingOver<\/span>}<\/span> \/\/ isDraggingOver\u3092\u8ffd\u52a0<\/span>\r\n          ><\/span>\r\n            {<\/span>this<\/span>.<\/span>props<\/span>.<\/span>tasks<\/span>.<\/span>map<\/span>((<\/span>task<\/span>,<\/span> index<\/span>)<\/span> =><\/span> <<\/span>Task<\/span> key<\/span>=<\/span>{<\/span>task<\/span>.<\/span>id<\/span>}<\/span> task<\/span>=<\/span>{<\/span>task<\/span>}<\/span> index<\/span>=<\/span>{<\/span>index<\/span>}<\/span>\/>)<\/span>}<\/span>\r\n          <\/<\/span>TaskList<\/span>><\/span>\r\n        )<\/span>}<\/span>\r\n        <\/<\/span>Droppable<\/span>><\/span>\r\n      <\/<\/span>Container<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u8fd9\u79cd\u72b6\u6001\u4e0b\u8fdb\u884c\u786e\u8ba4\u65f6\uff0c\u5f53\u62d6\u52a8\u65f6\uff0c\u80cc\u666f\u8272\u4f1a\u53d8\u4e3a\u5929\u84dd\u8272\uff0c\u800c\u653e\u4e0b\u65f6\u4f1a\u53d8\u6210\u767d\u8272\u3002<\/p>\n
\u63d0\u4f9b\u4e86\u5728\u5217\u4e4b\u95f4\u79fb\u52a8\u4efb\u52a1\u7684\u529f\u80fd\u3002<\/h2>\n
\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u6dfb\u52a0\u4e00\u5217\u5427\u3002
\n\u7531\u4e8e\u5217\u662f\u5728initial-data.js\u4e2d\u7ba1\u7406\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u8981\u8fdb\u884c\u79fb\u52a8\u3002<\/p>\n
const<\/span> initialData<\/span> =<\/span> {<\/span>\r\n  tasks<\/span>:<\/span> {<\/span>\r\n    '<\/span>task1<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task1<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Take out the garbage<\/span>'<\/span>},<\/span>\r\n    '<\/span>task2<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task2<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Watch my favorite show<\/span>'<\/span>},<\/span>\r\n    '<\/span>task3<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task3<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Charge my phone<\/span>'<\/span>},<\/span>\r\n    '<\/span>task4<\/span>'<\/span> :<\/span> {<\/span>id<\/span>:<\/span> '<\/span>task4<\/span>'<\/span>,<\/span> content<\/span>:<\/span> '<\/span>Cook dinner<\/span>'<\/span>},<\/span>\r\n  },<\/span>\r\n  columns<\/span>:<\/span> {<\/span>\r\n    '<\/span>column-1<\/span>'<\/span>:<\/span> {<\/span>\r\n      id<\/span>:<\/span> '<\/span>column-1<\/span>'<\/span>,<\/span>\r\n      title<\/span>:<\/span> '<\/span>Todo<\/span>'<\/span>,<\/span>\r\n      taskIds<\/span>:<\/span> [<\/span>'<\/span>task1<\/span>'<\/span>,<\/span> '<\/span>task2<\/span>'<\/span>,<\/span> '<\/span>task3<\/span>'<\/span>,<\/span> '<\/span>task4<\/span>'<\/span>]<\/span>\r\n    },<\/span>\r\n    '<\/span>column-2<\/span>'<\/span>:<\/span> {<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n      id<\/span>:<\/span> '<\/span>column-2<\/span>'<\/span>,<\/span>\r\n      title<\/span>:<\/span> '<\/span>progress<\/span>'<\/span>,<\/span>\r\n      taskIds<\/span>:<\/span> []<\/span>\r\n    },<\/span>\r\n    '<\/span>column-3<\/span>'<\/span>:<\/span> {<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n      id<\/span>:<\/span> '<\/span>column-3<\/span>'<\/span>,<\/span>\r\n      title<\/span>:<\/span> '<\/span>done<\/span>'<\/span>,<\/span>\r\n      taskIds<\/span>:<\/span> []<\/span>\r\n    },<\/span>\r\n  },<\/span>\r\n  columnOrder<\/span>:<\/span> [<\/span>'<\/span>column-1<\/span>'<\/span>,<\/span> '<\/span>column-2<\/span>'<\/span>,<\/span> '<\/span>column-3<\/span>'<\/span>],<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> initialData<\/span>\r\n<\/code><\/pre>\n
\u6211\u5728\u8fd9\u91cc\u6dfb\u52a0\u4e86\u4e24\u5217\u300c\u8fdb\u884c\u4e2d\u300d\u548c\u300c\u5df2\u5b8c\u6210\u300d\u3002id\u9700\u8981\u4fdd\u6301\u552f\u4e00\u6027\uff0c\u800ctaskIds\u5219\u4fdd\u6301\u7a7a\u72b6\u6001\u3002
\n\u7136\u540e\uff0c\u901a\u8fc7columnOrder\u6307\u5b9a\u4e86\u987a\u5e8f\u3002
\n\u8fd9\u6837\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u663e\u793a\u51fa\u4e09\u4e2a\u5217\u300c\u5f85\u529e\u4e8b\u9879\u300d\u300c\u8fdb\u884c\u4e2d\u300d\u300c\u5df2\u5b8c\u6210\u300d\u3002<\/p>\n
\u6574\u7406\u6587\u672c\u7ec4\u7684\u6837\u5f0f<\/h3>\n
\u7531\u4e8e\u76ee\u524d\u4e09\u5217\u662f\u5782\u76f4\u6392\u5217\u7684\uff0c\u8ba9\u6211\u4eec\u5c06\u5b83\u4eec\u6539\u4e3a\u6a2a\u5411\u6392\u5217\u3002\u6211\u4eec\u5c06\u628a\u5b83\u4eec\u79fb\u5230index.js\u6587\u4ef6\u4e2d\u3002<\/p>\n
import<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\n\r\nconst<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  display: flex;\r\n`<\/span>\r\n\r\nrender<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>DragDropContext<\/span> \r\n        onDragEnd<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDragEnd<\/span>}<\/span>\r\n      ><\/span>\r\n        <<\/span>Container<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>(<\/span>columnId<\/span> =><\/span> {<\/span>\r\n            const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n            const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n            return<\/span> <<\/span>Column<\/span> key<\/span>=<\/span>{<\/span>column<\/span>.<\/span>id<\/span>}<\/span> column<\/span>=<\/span>{<\/span>column<\/span>}<\/span> tasks<\/span>=<\/span>{<\/span>tasks<\/span>}<\/span> \/<\/span>>\r\n<\/span>          })}<\/span>\r\n        <<\/span>\/Container<\/span>>\r\n<\/span>      <<\/span>\/DragDropContext<\/span>>\r\n<\/span>    )<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u6837\u5c31\u662f\u6a2a\u6392\u4e86\uff0c\u4f46\u662f\u56e0\u4e3a\u6ca1\u6709\u6307\u5b9a\u5bbd\u5ea6\uff0c\u6240\u4ee5\u9700\u8981\u4fee\u6539\u3002<\/p>\n
const<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  margin: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n  width: 200px;\r\n`<\/span>\r\n<\/code><\/pre>\n
\u800c\u4e14\uff0c\u5373\u4f7f\u5728\u5f53\u524d\u9636\u6bb5\u5c1d\u8bd5\u79fb\u52a8\u4efb\u52a1\uff0c\u6211\u8ba4\u4e3a\u80cc\u666f\u989c\u8272\u4e5f\u4e0d\u4f1a\u5ef6\u4f38\u5230\u6574\u4e2a\u5c4f\u5e55\u3002\u8fd9\u662f\u56e0\u4e3a\u8fdb\u5ea6\u5217\u548c\u5b8c\u6210\u5217\u6ca1\u6709\u9ad8\u5ea6\u3002\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u4eec\u9700\u8981\u5e94\u7528\u6837\u5f0f\u3002<\/p>\n
const<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  margin: 8px;\r\n  border: 1px solid lightgray;\r\n  border-radius: 2px;\r\n  width: 220px;\r\n\r\n  display: flex; \/\/ \u8ffd\u52a0\r\n  flex-direction: column; \/\/\u8ffd\u52a0\r\n`<\/span>\r\nconst<\/span> Title<\/span> =<\/span> styled<\/span>.<\/span>h3<\/span>`\r\n  padding: 8px;\r\n`<\/span>\r\nconst<\/span> TaskList<\/span> =<\/span> styled<\/span>.<\/span>ul<\/span>`\r\n  list-style: none;\r\n  padding: 8px;\r\n  transition: background-color 0.3s ease;\r\n  background-color: <\/span>${<\/span>props<\/span> =><\/span> (<\/span>props<\/span>.<\/span>isDraggingOver<\/span>)<\/span> ?<\/span> '<\/span>skyblue<\/span>'<\/span> :<\/span> '<\/span>white<\/span>'<\/span>}<\/span>;\r\n  flex-grow: 1; \/\/ \u8ffd\u52a0\r\n  min-height: 100px; \/\/\u3000\u8ffd\u52a0\r\n`<\/span>\r\n<\/code><\/pre>\n
\u6211\u60f3\uff0c\u73b0\u5728\u5f53\u9f20\u6807\u60ac\u505c\u5728Progress\u548cDone\u5217\u4e0a\u65f6\uff0c\u80cc\u666f\u989c\u8272\u5e94\u8be5\u4f1a\u663e\u793a\u51fa\u6765\u4e86\u3002<\/p>\n
\u7f16\u5199\u4e00\u4e2a\u53ef\u4ee5\u5728\u5217\u4e4b\u95f4\u79fb\u52a8\u7684\u8fc7\u7a0b\u3002<\/h3>\n
\u6211\u8ba4\u4e3a\u73b0\u5728\u5c06\u4efb\u52a1\u79fb\u52a8\u5230Progress\u680f\u6216Done\u680f\u4e2d\u65e0\u6cd5\u6b63\u5e38\u5de5\u4f5c\u3002\u9700\u8981\u4fee\u6b63index.js\u4e2d\u7684onDragEnd\u5904\u7406\u3002<\/p>\n
onDragEnd<\/span> =<\/span> result<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> draggableId<\/span>,<\/span> source<\/span>,<\/span> destination<\/span> }<\/span> =<\/span> result<\/span>\r\n\r\n  \/\/ \u3053\u306e\u90e8\u5206\u306fsource.droppableId\u3068\u306a\u3063\u3066\u304a\u308a\u3001\u4eca\u56de\u306f\u958b\u59cb\u6642\u3068\u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u304c\u9055\u3046<\/span>\r\n  \/\/ \u53ef\u80fd\u6027\uff08Todo\u30ab\u30e9\u30e0\u304b\u3089Done\u30ab\u30e9\u30e0\u3078\u79fb\u52d5\u3059\u308b\u306a\u3069\uff09\u304c\u3042\u308b\u305f\u3081\u3001\u66f8\u304d\u63db\u3048\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/span>\r\n  const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>source<\/span>.<\/span>droppableId<\/span>]<\/span>\r\n  const<\/span> newTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>column<\/span>.<\/span>taskIds<\/span>)<\/span>\r\n  newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span>\r\n  newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span>\r\n\r\n  const<\/span> newColumn<\/span> =<\/span> {<\/span>\r\n    ...<\/span>column<\/span>,<\/span> \r\n    taskIds<\/span>:<\/span> newTasksIds<\/span>,<\/span>\r\n  }<\/span>\r\n\r\n  const<\/span> newState<\/span> =<\/span> {<\/span>\r\n    ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span>\r\n    columns<\/span>:<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span>\r\n      [<\/span>newColumn<\/span>.<\/span>id<\/span>]:<\/span> newColumn<\/span>\r\n    },<\/span>\r\n  }<\/span> \r\n\r\n  this<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
\u9996\u5148\uff0c\u5199\u4e0b\u4e00\u4e2a\u83b7\u53d6\u5f00\u59cb\u5217\u548c\u7ed3\u675f\u5217\u7684\u5904\u7406\u8fc7\u7a0b\uff0c\u5982\u679c\u5f00\u59cb\u5217\u548c\u7ed3\u675f\u5217\u76f8\u540c\uff0c\u90a3\u4e48\u5c31\u6267\u884c\u4ee5\u524d\u7684\u5904\u7406\u65b9\u5f0f\u8fdb\u884c\u6539\u5199\u3002<\/p>\n
onDragEnd<\/span> =<\/span> result<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> draggableId<\/span>,<\/span> source<\/span>,<\/span> destination<\/span> }<\/span> =<\/span> result<\/span>\r\n\r\n  const<\/span> start<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>source<\/span>.<\/span>droppableId<\/span>]<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3092\u53d6\u5f97<\/span>\r\n  const<\/span> finish<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>destination<\/span>.<\/span>droppableId<\/span>]<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u3092\u53d6\u5f97<\/span>\r\n\r\n  if<\/span>(<\/span>start<\/span> ===<\/span> finish<\/span>)<\/span> {<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3068\u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u304c\u540c\u3058\u3067\u3042\u308c\u3070\u5b9f\u884c<\/span>\r\n    const<\/span> newTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>start<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ column\u304b\u3089start\u306b\u66f8\u304d\u63db\u3048<\/span>\r\n    newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span>\r\n    newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span>\r\n\r\n    const<\/span> newColumn<\/span> =<\/span> {<\/span>\r\n      ...<\/span>start<\/span>,<\/span> \/\/ column\u304b\u3089start\u306b\u66f8\u304d\u63db\u3048 <\/span>\r\n      taskIds<\/span>:<\/span> newTasksIds<\/span>,<\/span>\r\n    }<\/span>\r\n\r\n    const<\/span> newState<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span>\r\n      columns<\/span>:<\/span> {<\/span>\r\n        ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span>\r\n        [<\/span>newColumn<\/span>.<\/span>id<\/span>]:<\/span> newColumn<\/span>\r\n      },<\/span>\r\n    }<\/span> \r\n    this<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span>\r\n    return<\/span>  \/\/ \u3053\u3053\u3092\u901a\u3063\u305f\u3089\u51e6\u7406\u3092\u7d42\u308f\u3089\u305b\u308b<\/span>\r\n  }<\/span> \r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u540c\u4e00\u5217\u4e2d\uff0c\u4efb\u52a1\u7684\u79fb\u52a8\u5e94\u8be5\u4ecd\u7136\u662f\u53ef\u884c\u7684\u3002
\n\u6700\u540e\uff0c\u5c06\u7f16\u5199\u4e00\u6bb5\u4ee3\u7801\uff0c\u4f7f\u4efb\u52a1\u80fd\u591f\u5728\u4e0d\u540c\u7684\u5217\u4e2d\u79fb\u52a8\u3002\u8fd9\u91cc\u7684\u4ee3\u7801\u5e94\u8be5\u4e0e\u5df2\u7ecf\u7f16\u5199\u7684\u4ee3\u7801\u975e\u5e38\u76f8\u4f3c\uff0c\u56e0\u6b64\u5f88\u5bb9\u6613\u7406\u89e3\u3002<\/p>\n
\r\n\/\/ \u958b\u59cb\u30ab\u30e9\u30e0\u3068\u7d42\u4e86\u30ab\u30e9\u30e0\u304c\u9055\u3044\u5834\u5408\u306e\u51e6\u7406<\/span>\r\nconst<\/span> startTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>start<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u304b\u3089\u30bf\u30b9\u30af\u306eid\u3092\u53d6\u5f97<\/span>\r\nstartTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span> \/\/ draggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5143\u3042\u3063\u305f\u5834\u6240\u304b\u30891\u3064\u914d\u5217\u3092\u524a\u9664\u3059\u308b<\/span>\r\nconst<\/span> newStart<\/span> =<\/span> {<\/span>\r\n  ...<\/span>start<\/span>,<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3092\u30b3\u30d4\u30fc<\/span>\r\n  taskIds<\/span>:<\/span> startTasksIds<\/span>,<\/span> \/\/ taskIds\u306e\u5024\u3092startTaskIds\u306b\u7f6e\u304d\u63db\u3048\u308b<\/span>\r\n}<\/span>\r\n\r\nconst<\/span> finishTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>finish<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u304b\u3089\u30bf\u30b9\u30af\u306eid\u3092\u53d6\u5f97<\/span>\r\nfinishTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span> \/\/ draggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u7f6e\u304b\u308c\u305f\u5834\u6240\u306bdraggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b<\/span>\r\nconst<\/span> newFinish<\/span> =<\/span> {<\/span>\r\n  ...<\/span>finish<\/span>,<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u3092\u30b3\u30d4\u30fc<\/span>\r\n  taskIds<\/span>:<\/span> finishTasksIds<\/span>,<\/span> \/\/ taskIds\u306e\u5024\u3092finishTaskIds\u306b\u7f6e\u304d\u63db\u3048\u308b<\/span>\r\n}<\/span>\r\n\r\nconst<\/span> newState<\/span> =<\/span> {<\/span>\r\n  ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span> \/\/ state\u3092\u30b3\u30d4\u30fc<\/span>\r\n  columns<\/span>:<\/span> {<\/span> \r\n    ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span> \/\/ columns\u3092\u30b3\u30d4\u30fc<\/span>\r\n    [<\/span>newStart<\/span>.<\/span>id<\/span>]:<\/span> newStart<\/span>,<\/span>  \/\/ start\u6642\u306eid: {id: start\u6642\u306eid, title: 'start\u6642\u306etitle', taskIds: 'start\u6642\u306eids'}<\/span>\r\n    [<\/span>newFinish<\/span>.<\/span>id<\/span>]:<\/span> newFinish<\/span>,<\/span> \/\/ finish\u6642\u306eid: {id: finish\u6642\u306eid, title: 'finish\u6642\u306etitle', taskIds: 'finish\u6642\u306eids'}<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nthis<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span> \/\/state\u306e\u66f4\u65b0\u2192\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/span>\r\n<\/code><\/pre>\n
\u8bf7\u5728\u6d4f\u89c8\u5668\u4e2d\u8fdb\u884c\u52a8\u6001\u68c0\u67e5\u3002\u5982\u679c\u4e00\u5207\u6b63\u5e38\u8fd0\u884c\uff0c\u90a3\u5c31\u5b8c\u6210\u4e86\uff01\u606d\u559c\uff01\u6700\u540e\u6211\u5c06\u9644\u4e0aindex.js\u7684\u5b8c\u6574\u4ee3\u7801\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>@atlaskit\/css-reset<\/span>'<\/span>\r\nimport<\/span> styled<\/span> from<\/span> '<\/span>styled-components<\/span>'<\/span>\r\nimport<\/span> {<\/span> DragDropContext<\/span> }<\/span> from<\/span> '<\/span>react-beautiful-dnd<\/span>'<\/span>\r\nimport<\/span> initialData<\/span> from<\/span> '<\/span>.\/initial-data<\/span>'<\/span>\r\nimport<\/span> Column<\/span> from<\/span> '<\/span>.\/Column<\/span>'<\/span>\r\n\r\nconst<\/span> Container<\/span> =<\/span> styled<\/span>.<\/span>div<\/span>`\r\n  display: flex;\r\n`<\/span>\r\n\r\nclass<\/span> App<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  state<\/span> =<\/span> initialData<\/span>\r\n\r\n  onDragEnd<\/span> =<\/span> result<\/span> =><\/span> {<\/span>\r\n    const<\/span> {<\/span> draggableId<\/span>,<\/span> source<\/span>,<\/span> destination<\/span> }<\/span> =<\/span> result<\/span>\r\n\r\n    \/\/ destination: \u30c9\u30ed\u30c3\u30d7\u5148 \u304c\u306a\u3044\u5834\u5408\u306b\u306f\u51e6\u7406\u3092\u7d42\u4e86<\/span>\r\n    if<\/span> (<\/span>!<\/span>destination<\/span>)<\/span> {<\/span>\r\n      return<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ \u30c9\u30ed\u30c3\u30d7\u524d\u5f8c\u306eID\u304c\u540c\u3058\u3067\u3001\u30c9\u30ed\u30c3\u30d7\u524d\u5f8c\u306eindex\u304c\u540c\u3058\u5834\u5408\u306b\u306f\u51e6\u7406\u3092\u7d42\u4e86<\/span>\r\n    if<\/span> (<\/span>\r\n      destination<\/span>.<\/span>droppableId<\/span> ===<\/span> source<\/span>.<\/span>droppableId<\/span> &&<\/span>\r\n      destination<\/span>.<\/span>index<\/span> ===<\/span> source<\/span>.<\/span>index<\/span>\r\n    )<\/span> {<\/span>\r\n      return<\/span>\r\n    }<\/span>\r\n\r\n    const<\/span> start<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>source<\/span>.<\/span>droppableId<\/span>]<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3092\u53d6\u5f97<\/span>\r\n    const<\/span> finish<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>destination<\/span>.<\/span>droppableId<\/span>]<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u3092\u53d6\u5f97<\/span>\r\n\r\n    if<\/span> (<\/span>start<\/span> ===<\/span> finish<\/span>)<\/span> {<\/span>  \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3068\u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u304c\u540c\u3058\u3067\u3042\u308c\u3070\u5b9f\u884c<\/span>\r\n      const<\/span> newTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>start<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ column\u304b\u3089start\u306b\u66f8\u304d\u63db\u3048<\/span>\r\n      newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span>\r\n      newTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span>\r\n\r\n      const<\/span> newColumn<\/span> =<\/span> {<\/span>\r\n        ...<\/span>start<\/span>,<\/span> \/\/ column\u304b\u3089start\u306b\u66f8\u304d\u63db\u3048 <\/span>\r\n        taskIds<\/span>:<\/span> newTasksIds<\/span>,<\/span>\r\n      }<\/span>\r\n\r\n      const<\/span> newState<\/span> =<\/span> {<\/span>\r\n        ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span>\r\n        columns<\/span>:<\/span> {<\/span>\r\n          ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span>\r\n          [<\/span>newColumn<\/span>.<\/span>id<\/span>]:<\/span> newColumn<\/span>\r\n        },<\/span>\r\n      }<\/span>\r\n\r\n      this<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span>\r\n      return<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ \u958b\u59cb\u30ab\u30e9\u30e0\u3068\u7d42\u4e86\u30ab\u30e9\u30e0\u304c\u9055\u3044\u5834\u5408\u306e\u51e6\u7406<\/span>\r\n    const<\/span> startTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>start<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u304b\u3089\u30bf\u30b9\u30af\u306eid\u3092\u53d6\u5f97<\/span>\r\n    startTasksIds<\/span>.<\/span>splice<\/span>(<\/span>source<\/span>.<\/span>index<\/span>,<\/span> 1<\/span>)<\/span> \/\/ draggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5143\u3042\u3063\u305f\u5834\u6240\u304b\u30891\u3064\u914d\u5217\u3092\u524a\u9664\u3059\u308b<\/span>\r\n    const<\/span> newStart<\/span> =<\/span> {<\/span>\r\n      ...<\/span>start<\/span>,<\/span> \/\/ \u958b\u59cb\u6642\u306e\u30ab\u30e9\u30e0\u3092\u30b3\u30d4\u30fc<\/span>\r\n      taskIds<\/span>:<\/span> startTasksIds<\/span>,<\/span> \/\/ taskIds\u306e\u5024\u3092startTaskIds\u306b\u7f6e\u304d\u63db\u3048\u308b<\/span>\r\n    }<\/span>\r\n\r\n    const<\/span> finishTasksIds<\/span> =<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>finish<\/span>.<\/span>taskIds<\/span>)<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u304b\u3089\u30bf\u30b9\u30af\u306eid\u3092\u53d6\u5f97<\/span>\r\n    finishTasksIds<\/span>.<\/span>splice<\/span>(<\/span>destination<\/span>.<\/span>index<\/span>,<\/span> 0<\/span>,<\/span> draggableId<\/span>)<\/span> \/\/ draggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u7f6e\u304b\u308c\u305f\u5834\u6240\u306bdraggable\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b<\/span>\r\n    const<\/span> newFinish<\/span> =<\/span> {<\/span>\r\n      ...<\/span>finish<\/span>,<\/span> \/\/ \u7d42\u4e86\u6642\u306e\u30ab\u30e9\u30e0\u3092\u30b3\u30d4\u30fc<\/span>\r\n      taskIds<\/span>:<\/span> finishTasksIds<\/span>,<\/span> \/\/ taskIds\u306e\u5024\u3092finishTaskIds\u306b\u7f6e\u304d\u63db\u3048\u308b<\/span>\r\n    }<\/span>\r\n\r\n    const<\/span> newState<\/span> =<\/span> {<\/span>\r\n      ...<\/span>this<\/span>.<\/span>state<\/span>,<\/span> \/\/ state\u3092\u30b3\u30d4\u30fc<\/span>\r\n      columns<\/span>:<\/span> {<\/span> \r\n        ...<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>,<\/span> \/\/ columns\u3092\u30b3\u30d4\u30fc<\/span>\r\n        [<\/span>newStart<\/span>.<\/span>id<\/span>]:<\/span> newStart<\/span>,<\/span>  \/\/ start\u6642\u306eid: {id: start\u6642\u306eid, title: 'start\u6642\u306etitle', taskIds: 'start\u6642\u306eids'}<\/span>\r\n        [<\/span>newFinish<\/span>.<\/span>id<\/span>]:<\/span> newFinish<\/span>,<\/span> \/\/ finish\u6642\u306eid: {id: finish\u6642\u306eid, title: 'finish\u6642\u306etitle', taskIds: 'finish\u6642\u306eids'}<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n\r\n    this<\/span>.<\/span>setState<\/span>(<\/span>newState<\/span>)<\/span> \/\/state\u306e\u66f4\u65b0\u2192\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>DragDropContext<\/span>\r\n        onDragEnd<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDragEnd<\/span>}<\/span>\r\n      ><\/span>\r\n        <<\/span>Container<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>state<\/span>.<\/span>columnOrder<\/span>.<\/span>map<\/span>(<\/span>columnId<\/span> =><\/span> {<\/span>\r\n            const<\/span> column<\/span> =<\/span> this<\/span>.<\/span>state<\/span>.<\/span>columns<\/span>[<\/span>columnId<\/span>]<\/span>\r\n            const<\/span> tasks<\/span> =<\/span> column<\/span>.<\/span>taskIds<\/span>.<\/span>map<\/span>(<\/span>taskId<\/span> =><\/span> this<\/span>.<\/span>state<\/span>.<\/span>tasks<\/span>[<\/span>taskId<\/span>])<\/span>\r\n\r\n            return<\/span> <<\/span>Column<\/span> key<\/span>=<\/span>{<\/span>column<\/span>.<\/span>id<\/span>}<\/span> column<\/span>=<\/span>{<\/span>column<\/span>}<\/span> tasks<\/span>=<\/span>{<\/span>tasks<\/span>}<\/span> \/<\/span>>\r\n<\/span>          })}<\/span>\r\n        <<\/span>\/Container<\/span>>\r\n<\/span>      <<\/span>\/DragDropContext<\/span>>\r\n<\/span>    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/React.StrictMode><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n<\/code><\/pre>\n
\u603b\u7ed3<\/h2>\n
\u5728\u9605\u8bfb\u5230\u8fd9\u91cc\u65f6\uff0c\u975e\u5e38\u611f\u8c22\u60a8\u7684\u5199\u4f5c\u3002\u8f9b\u82e6\u4e86\u3002<\/p>\n
\u8fd9\u6b21\u6211\u7b2c\u4e00\u6b21\u5199\u4e86\u4e00\u7bc7\u5173\u4e8eReact\u7684\u6587\u7ae0\u3002
\n\u6700\u521d\u6211\u6253\u7b97\u7528JavaScript\u6765\u5b9e\u73b0\uff0c\u4f46\u662f\u6211\u653e\u5f03\u4e86\uff0c\u56e0\u4e3a\u4f30\u8ba1\u4f1a\u82b1\u8d39\u5f88\u957f\u65f6\u95f4\uff0c\u8fd8\u597d\u6ca1\u6709\u53bb\u505a…<\/p>\n
\u5728\u5de5\u4f5c\u4e2d\uff0c\u4eba\u4eec\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u4f1a\u8981\u6c42\u6211\u4eec\u80fd\u591f\u8fc5\u901f\u800c\u7cbe\u7f8e\u5730\u5b8c\u6210\u5199\u4f5c\uff0c\u6240\u4ee5\u6211\u8ba4\u4e3a\u660e\u667a\u7684\u9009\u62e9\u662f\u5145\u5206\u5229\u7528\u53ef\u7528\u7684\u5de5\u5177\uff0c\u5c06\u8d44\u6e90\u96c6\u4e2d\u7528\u4e8e\u5176\u4ed6\u4e8b\u60c5\u3002\u6211\u4ece\u4e2d\u5b66\u5230\u4e86\u8fd9\u4e00\u70b9\u3002<\/p>\n
\u5728\u4ee3\u7801\u65b9\u9762\uff0c\u6211\u5b66\u5230\u4e86\u4e00\u4e9b\u5173\u4e8e\u6570\u7ec4\u5904\u7406\u65b9\u6cd5\u3001\u5c55\u5f00\u8fd0\u7b97\u7b26\u7684\u7528\u6cd5\u4ee5\u53castyled-components\u7684\u5199\u6cd5\u3002\u786e\u5b9e\uff0c\u770b\u5b9e\u9645\u7531\u4e13\u4e1a\u4eba\u58eb\u7f16\u5199\u7684\u4ee3\u7801\u4e5f\u5f88\u91cd\u8981\u3002
\n\u6211\u8fd8\u770b\u8fc7\u4e86\u4e00\u95e8\u7528\u82f1\u8bed\u89e3\u8bf4\u7684\u8bfe\u7a0b\uff0c\u5373\u4f7f\u542c\u4e0d\u61c2\u4ed6\u4eec\u5728\u8bf4\u4ec0\u4e48\uff0c\u901a\u8fc7\u89c2\u5bdf\u4ee3\u7801\u53ef\u4ee5\u7406\u89e3\u4ed6\u4eec\u60f3\u505a\u4ec0\u4e48\uff0c\u5e76\u4e14\u901a\u8fc7\u7ffb\u8bd1\u4e5f\u80fd\u52c9\u5f3a\u641e\u5b9a\u3002\u53e6\u5916\uff0c\u975e\u5e38\u91cd\u8981\u7684\u4e00\u70b9\u5c31\u662f\u8fd0\u884cconsole.log\u5e76\u9010\u4e00\u786e\u8ba4\u5176\u5185\u5bb9\u3002\u6211\u8ba4\u4e3a\u8fd9\u662f\u6700\u91cd\u8981\u7684\u3002<\/p>\n
\u672a\u6765\u7684\u53d1\u5c55<\/h3>\n
\u30fb\u63d0\u4f9b\u4e00\u4e2a\u8f93\u5165\u533a\u57df\uff0c\u4f7f\u7528\u6237\u53ef\u4ee5\u6dfb\u52a0\u503c
\n\u30fb\u5e0c\u671b\u4e0eFirebase\u534f\u4f5c\uff0c\u4ee5\u4fbf\u53ef\u4ee5\u4fdd\u5b58TODO\u7b49\u7b49
\n\u30fb\u56e0\u4e3a\u4f7f\u7528\u4e86class\u7ec4\u4ef6\u7684\u5199\u6cd5\uff0c\u6240\u4ee5\u60f3\u8981\u6539\u5199\u6210\u51fd\u6570\u7ec4\u4ef6\uff0c\u6216\u8005\u4f7f\u7528React hooks\u8fdb\u884c\u6539\u5199
\n\u30fb\u7531\u4e8e\u754c\u9762\u975e\u5e38\u7b80\u5355\uff0c\u6240\u4ee5\u5e0c\u671b\u4e5f\u53ef\u4ee5\u4f7f\u7528Material UI\u7b49\u7ec4\u4ef6\u5e93
\n\u30fb\u5e0c\u671b\u80fd\u591f\u8ba9\u771f\u6b63\u7684\u804c\u573a\u4f7f\u7528\u8005\u4f7f\u7528\uff0c\u5e76\u8fdb\u884c\u6539\u8fdb\u548c\u4fee\u6b63
\n\u30fb\u76ee\u524d\u53ea\u5b9e\u73b0\u4e86CRUD\u4e2d\u7684C\uff0c\u5e0c\u671b\u80fd\u6dfb\u52a0\u5176\u4ed6\u529f\u80fd\u3002<\/p>\n
\u5e7f\u544a<\/h3>\n
\u6211\u6b63\u5728\u5ff5\u53e8\u66f4\u65b0\u3002
\n\u535a\u5ba2 \u2192 shoublog
\n\u63a8\u7279 \u2192 syoyamamoto<\/p>\n
\u6211\u6b63\u5728\u6469\u91cc\u80af\u587e\u5b66\u4e60\u4e2d\u3002\u6211\u5728\u8fd9\u91cc\u5b66\u4e60\u4e86JavaScript\u7684\u57fa\u7840\u3002\u5fc5\u987b\u5173\u6ce8Moriken\u8001\u5e08\u3002
\nMoriken\u8001\u5e08\u7684\u63a8\u7279\u8d26\u53f7\u2192 @terrace_tech
\nMoriken\u8001\u5e08\u7684\u535a\u5ba2\u2192 \u7121\u9aa8\u65e5\u8bb0<\/p>\n
\u6b64\u5916\uff0c\u6211\u4e5f\u5728Udemy\u4e0a\u53d7\u5230\u77e5\u540d\u7684\u306f\u3080\u5148\u751f\u7684\u793e\u7fa4\u5b78\u7fd2\u3002\u5728\u90a3\u88e1\u6709\u5f88\u591a\u73fe\u5f79\u5de5\u7a0b\u5e2b\uff0c\u6211\u4e00\u76f4\u53d7\u5230\u4ed6\u5011\u7684\u7167\u9867\u3002\u306f\u3080\u5148\u751f\u662f\u4e00\u4f4d\u7db2\u9801\u5de5\u7a0b\u5e2b\uff0c\u5f9e\u91d1\u878d\u5371\u6a5f\u7684\u88c1\u54e1\u4e2d\u91cd\u65b0\u5d1b\u8d77\u3002\u6b61\u8fce\u5f9e\u4ed6\u7684\u500b\u4eba\u8cc7\u6599\u9032\u5165\u306f\u3080\u793e\u7fa4\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u9996\u5148 \u672c\u6b21\u6211\u4eec\u5c06\u4f7f\u7528React\u548creact-beautiful-dnd\u6765\u89e3\u91ca\u5236\u4f5c\u4e00\u4e2a\u7c7b\u4f3cTrello\u7684\u770b\u677f\u5e94\u7528 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38296","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react\u7f16\u5199trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u672c\u6b21\u6211\u4eec\u5c06\u4f7f\u7528React\u548creact-beautiful-dnd\u6765\u89e3\u91ca\u5236\u4f5c\u4e00\u4e2a\u7c7b\u4f3cTrello\u7684\u770b\u677f\u5e94\u7528 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react\u7f16\u5199trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-20T01:20:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T20:15:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d336c37434c4406c6552f\/64-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u5b87\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u5b87\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/\",\"name\":\"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-08-20T01:20:56+00:00\",\"dateModified\":\"2024-05-03T20:15:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e\",\"name\":\"\u6e05, \u5b87\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u5b87\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react\u7f16\u5199trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011","og_description":"\u9996\u5148 \u672c\u6b21\u6211\u4eec\u5c06\u4f7f\u7528React\u548creact-beautiful-dnd\u6765\u89e3\u91ca\u5236\u4f5c\u4e00\u4e2a\u7c7b\u4f3cTrello\u7684\u770b\u677f\u5e94\u7528 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react\u7f16\u5199trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-08-20T01:20:56+00:00","article_modified_time":"2024-05-03T20:15:12+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d336c37434c4406c6552f\/64-0.png"}],"author":"\u6e05, \u5b87","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u5b87","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"10 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/","name":"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-08-20T01:20:56+00:00","dateModified":"2024-05-03T20:15:12+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010React\u3011\u4f7f\u7528React\u7f16\u5199Trello\u98ce\u683c\u7684\u770b\u677f\u5e94\u7528\u7684\u6b65\u9aa4\u3010react-beautiful-dnd\u3011"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/1a6ecd3d914d22a5ac32791ffc1fbd8e","name":"\u6e05, \u5b87","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b2016c18459a605fc469c7566608f5686491baa112d0871ee613f61b7210565?s=96&d=mm&r=g","caption":"\u6e05, \u5b87"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react%e7%bc%96%e5%86%99trello%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%9c%8b%e6%9d%bf%e5%ba%94%e7%94%a8%e7%9a%84%e6%ad%a5%e9%aa%a4%e3%80%90react-beautiful-dnd%e3%80%91\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38296"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38296\/revisions"}],"predecessor-version":[{"id":96055,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38296\/revisions\/96055"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}