{"id":8924,"date":"2022-08-29T10:54:05","date_gmt":"2022-08-29T02:54:05","guid":{"rendered":"https:\/\/sdeno.com\/?p=8924"},"modified":"2022-08-29T11:07:19","modified_gmt":"2022-08-29T03:07:19","slug":"%e6%8b%96%e6%8b%bd%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8924","title":{"rendered":"\u62d6\u62fd\u7ec4\u4ef6"},"content":{"rendered":"

1\uff0cReact Beautiful Dnd<\/span><\/p>\n

react-beautiful-dnd \u662f\u4e00\u6b3e\u7f8e\u89c2\u4e14\u7b80\u5355\u6613\u7528\u7684 React \u5217\u8868\u62d6\u62fd\u5e93\u3002\u5176\u52a8\u753b\u6548\u679c\u81ea\u7136\uff0c\u6027\u80fd\u4f18\u79c0\uff0c\u7b80\u6d01\u800c\u5f3a\u5927\u7684 API\uff0c\u6613\u4e8e\u4e0a\u624b\uff0c\u4e0e\u6807\u51c6\u6d4f\u89c8\u5668\u7684\u4e92\u52a8\u6027\u975e\u5e38\u597d\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/640.gif\"<\/figure>\n

https:\/\/github.com\/atlassian\/react-beautiful-dnd<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

2. Sortable<\/span><\/p>\n

Sortable \u662f\u4e00\u4e2a JavaScript \u62d6\u62fd\u5e93\uff0c\u7528\u4e8e\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u548c\u89e6\u6478\u8bbe\u5907\u4e0a\u5bf9\u62d6\u653e\u5217\u8868\u8fdb\u884c\u91cd\u65b0\u6392\u5e8f\u3002\u652f\u6301 Meteor\u3001AngularJS\u3001React\u3001Polymer\u3001Vue\u3001Ember\u3001Knockout \u548c\u4efb\u4f55 CSS \u5e93\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/1_20220829105316.png\"<\/figure>\n

https:\/\/github.com\/SortableJS\/Sortable<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

3. Dragula<\/span><\/p>\n

Dragula \u662f\u4e00\u4e2a JavaScript \u5e93\uff0c\u5b9e\u73b0\u4e86\u7f51\u9875\u4e0a\u7684\u62d6\u653e\u529f\u80fd\u3002\u63d0\u4f9b JavaScript\u3001AngularJS \u548c React \u7248\u672c\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/220220829105456.png\"<\/figure>\n

https:\/\/github.com\/bevacqua\/dragula<\/a><\/p>\n

 <\/p>\n

4\uff0cReact DnD<\/span><\/p>\n

React DnD\u662f React \u548c Redux \u6838\u5fc3\u4f5c\u8005 Dan Abramov \u521b\u9020\u7684\u4e00\u7ec4React \u9ad8\u9636\u7ec4\u4ef6\uff0c\u53ef\u5e2e\u52a9\u6211\u4eec\u6784\u5efa\u590d\u6742\u7684\u62d6\u653e\u754c\u9762\uff0c\u540c\u65f6\u4fdd\u6301\u7ec4\u4ef6\u89e3\u8026\u3002\u5b83\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u4e0d\u540c\u90e8\u5206\u4e4b\u95f4\u901a\u8fc7\u62d6\u52a8\u4f20\u8f93\u6570\u636e\uff0c\u5e76\u4e14\u7ec4\u4ef6\u4f1a\u66f4\u6539\u5176\u5916\u89c2\u548c\u5e94\u7528\u72b6\u6001\u4ee5\u54cd\u5e94\u62d6\u653e\u4e8b\u4ef6\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/2_20220829105640.png\"<\/figure>\n

https:\/\/github.com\/react-dnd\/react-dnd<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

5\uff0cVue.Draggable<\/span><\/p>\n

Vue.Draggable \u662f\u57fa\u4e8e Sortable.js \u7684 Vue \u62d6\u653e\u7ec4\u4ef6\u3002\u5b83\u5141\u8bb8\u62d6\u653e\u548c\u89c6\u56fe\u6a21\u578b\u6570\u7ec4\u540c\u6b65\uff0c\u57fa\u4e8e\u5e76\u63d0\u4f9b Sortable.js \u7684\u6240\u6709\u529f\u80fd\u3002\u8be5\u5e93\u9002\u7528\u4e8eVue 2\uff0c\u5982\u679c\u60f3\u5728 Vue 3 \u4e2d\u4f7f\u7528\u8be5\u5e93\uff0c\u53ef\u4ee5\u8bbf\u95ee\uff1ahttps:\/\/github.com\/SortableJS\/vue.draggable.next\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/6402-1024x782.gif\"<\/figure>\n

https:\/\/github.com\/SortableJS\/Vue.Draggable<\/a><\/p>\n

 <\/p>\n

6. interact.js<\/span><\/p>\n

interact.js \u662f\u4e00\u4e2a\u9002\u7528\u4e8e\u73b0\u4ee3\u6d4f\u89c8\u5668\u7684 JavaScript \u62d6\u653e\u5e93\uff0c\u652f\u6301\u8c03\u6574\u5927\u5c0f\u548c\u591a\u70b9\u89e6\u63a7\u624b\u52bf\uff0c\u5177\u6709\u60ef\u6027\u548c\u6355\u6349\u529f\u80fd\u3002\u4e3a\u4e86\u5c3d\u53ef\u80fd\u591a\u5730\u63d0\u4f9b\u63a7\u5236\uff0c\u5b83\u5c1d\u8bd5\u63d0\u4f9b\u4e00\u4e2a\u7b80\u5355\u3001\u7075\u6d3b\u7684API\uff0c\u8be5 API \u63d0\u4f9b\u79fb\u52a8\u5143\u7d20\u6240\u9700\u7684\u6240\u6709\u62d6\u62fdAPI\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/3_20220829110032.png\"<\/figure>\n

https:\/\/github.com\/taye\/interact.js<\/a><\/p>\n

 <\/p>\n

7. React Draggable<\/span><\/p>\n

React-Draggable \u5e93\u7b80\u5355\u6613\u7528\uff0c\u5c06 CSS \u4e2d\u7684transform\u5e94\u7528\u4e8e React \u7ec4\u4ef6\uff0c\u5141\u8bb8\u6211\u4eec\u5728 UI \u4e2d\u62d6\u52a8\u7ec4\u4ef6\u3002\u5b83\u6709\u4e0d\u540c\u7684 props \u53ef\u4ee5\u8ba9\u4f60\u6539\u53d8\u7ec4\u4ef6\u7684\u884c\u4e3a\uff0c\u662f\u521b\u5efa\u76f4\u89c2\u3001\u7528\u6237\u53cb\u597d\u754c\u9762\u7684\u7edd\u4f73\u9009\u62e9\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/6403.gif\"<\/figure>\n

https:\/\/github.com\/react-grid-layout\/react-draggable<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

8. React Sortable Tree<\/span><\/p>\n

React Sortable Tree \u662f\u4e00\u4e2a\u7528\u4e8e\u5bf9\u5206\u5c42\u6570\u636e\u8fdb\u884c\u62d6\u653e\u5f0f\u53ef\u6392\u5e8f\u8868\u793a\u7684React\u7ec4\u4ef6\u3002\u5b83\u652f\u6301\u5355\u9009\u591a\u9009\uff0c\u9f20\u6807\u62d6\u62fd\u5b50\u96c6\u5230\u65b0\u5408\u96c6\uff0c\u6a21\u7cca\u641c\u7d22\u7b49\u3002<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/08\/6404.gif\"<\/figure>\n

https:\/\/github.com\/frontend-collective\/react-sortable-tree<\/a><\/p>\n

 <\/p>\n

https:\/\/mp.weixin.qq.com\/s?__biz=MzAwNDcyNjI3OA==&mid=2650861036&idx=1&sn=32924ef0d0cec5bce43cf6e3a240f48a&chksm=80d3c685b7a44f93702ff28363035cba4acbd2123c2919a276910a1f117bb10fd0755ae63cb0&scene=90&subscene=93&sessionid=1661741021&clicktime=1661741030&enterid=1661741030&ascene=56&fasttmpl_type=0&fasttmpl_fullversion=6303754-zh_CN-zip&fasttmpl_flag=0&realreporttime=1661741030952&devicetype=android-31&version=28001b37&nettype=WIFI&abtest_cookie=AAACAA%3D%3D&lang=zh_CN&session_us=gh_bc198e21ee3e&exportkey=A%2B2Pp0xiZX4jeIdV5r8jUA4%3D&pass_ticket=hWs7brWLJWeWQlwjogBvu7Xka3GwcIeZn9l81Mc8NYICK6AOvuKOPJAEVocsvccm&wx_header=3<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

1\uff0cReact Beautiful Dnd react-beautiful-dnd \u662f\u4e00\u6b3e\u7f8e\u89c2\u4e14\u7b80\u5355\u6613\u7528\u7684 R […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8924","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8924"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8924\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}