{"id":2972,"date":"2019-11-13T14:26:26","date_gmt":"2019-11-13T07:26:26","guid":{"rendered":"http:\/\/cryptedbrain.ru\/?p=2972"},"modified":"2020-01-14T12:35:43","modified_gmt":"2020-01-14T05:35:43","slug":"sortable-by-drag-and-drop-list-react-component-with-auto-width","status":"publish","type":"post","link":"https:\/\/cryptedbrain.ru\/?p=2972","title":{"rendered":"Sortable (by drag and drop) list React Component with auto width"},"content":{"rendered":"\n<h2>Installation<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">npm&nbsp;install&nbsp;react-drag-sortable<\/pre>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#description\"><\/a><\/h2>\n\n\n\n<h2>Description<\/h2>\n\n\n\n<p>Make a list of elements (array) sortable by drag and drop. Allows to \nspecify a customizable placeholder to be displayed on the drop area.\nAllows to customize the style of items at every step (normal, being \ndragged, placeholder).\nThe component supports both horizontal and vertical lists. The component\n uses interact.js for crossbrowser dragging (see <a href=\"http:\/\/interactjs.io\/\">http:\/\/interactjs.io<\/a> for more details).\nWorks with items of variables width (in %)  as well as static width.<\/p>\n\n\n\n<p>SUPPORTS IOS AND TOUCH GESTURES (tested on ipad and safari)<\/p>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#demo\"><\/a><\/h2>\n\n\n\n<h2>Demo<\/h2>\n\n\n\n<p><a href=\"http:\/\/experiments.thomschell.com\/react-drag-sortable\/demo\/build\/\">Here<\/a><\/p>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#usage\"><\/a><\/h2>\n\n\n\n<h2>Usage<\/h2>\n\n\n\n<p>Import the component :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import&nbsp;DragSortableList&nbsp;from&nbsp;'react-drag-sortable'<\/pre>\n\n\n\n<p>Use the component :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;DragSortableList&nbsp;items={list}&nbsp;placeholder={placeholder}&nbsp;onSort={onSort}&nbsp;dropBackTransitionDuration={0.3}&nbsp;type=\"vertical\"\/&gt;&lt;DragSortableList&nbsp;items={list}&nbsp;onSort={onSort}&nbsp;type=\"horizontal\"\/&gt;<\/pre>\n\n\n\n<p>You can pass the following properties:<\/p>\n\n\n\n<ul><li>items: array of items to sort. Each item must be an object with a \ncontent property. You can optionally pass an array of classes that will \nbe added to the item. For instance :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;var&nbsp;list&nbsp;=&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test1&lt;\/div&gt;),&nbsp;classes:['bigger']},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test2&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test3&lt;\/div&gt;),&nbsp;classes:['bigger']},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test4&lt;\/div&gt;)}];<\/pre>\n\n\n\n<ul><li>type: &#8216;vertical&#8217;, &#8216;horizontal&#8217; or &#8216;grid&#8217;<\/li><li>moveTransitionDuration (number): if a duration is provided, items \nwill animate when they move on drag. The CSS animation&#8217;s duration is the\n number provided.<\/li><li>dropBackTransitionDuration (number): if a duration is provided, the \ndragged item will go back to its original position when not dropped on a\n different target. The CSS animation&#8217;s duration is the number provided.<\/li><li>placeholder: content to display on drag target. If you don&#8217;t pass a \nplaceholder, a copy of the dragged item will be displayed. For instance:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">var&nbsp;placeholder&nbsp;=&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;className=\"placeholderContent\"&gt;PLACEHOLDER&lt;\/div&gt;);<\/pre>\n\n\n\n<ul><li>callback function called on drop (when list is sorted). Takes the \nnew sorted list and the latest drop Event as arguments. For instance:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;var&nbsp;onSort&nbsp;=&nbsp;function(sortedList,&nbsp;dropEvent)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"sortedList\",&nbsp;sortedList,&nbsp;dropEvent);&nbsp;}<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">ReactDOM.render(&lt;DragSortableList&nbsp;items={list}&nbsp;placeholder={placeholder}&nbsp;onSort={onSort}&nbsp;type=\"vertical\"\/&gt;,&nbsp;document.getElementById('main'));<\/pre>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#style\"><\/a><\/h2>\n\n\n\n<h2>Style<\/h2>\n\n\n\n<p>The list elements all have a class .draggable\nThe element being dragged has a class .dragged while it&#8217;s being dragged\nThe placeholder has a class .placeholder<\/p>\n\n\n\n<p>For instance, you can customize the style :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.draggable&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;yellow;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;10px;}&nbsp;.dragged&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0.7;}&nbsp;.placeholder&nbsp;{&nbsp;&nbsp;opacity:&nbsp;0.5;}<\/pre>\n\n\n\n<p>You can mix your custom classes (&#171;classes&#187; property in items list) with these classes for powerful styling.\nYou will find more complex examples of styling in the example folder.<\/p>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#no-drag\"><\/a><\/h2>\n\n\n\n<h2>no-drag<\/h2>\n\n\n\n<p>You can prevent an element of being draggable by adding the class \n&#171;no-drag&#187;. This examples contains a list where the texts are draggable \nbut not the inputs.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const&nbsp;listWithNoDrag&nbsp;=&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test1&lt;input&nbsp;type='text'&nbsp;className='no-drag'\/&gt;&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test2&lt;input&nbsp;type='text'&nbsp;className='no-drag'\/&gt;&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test3&lt;input&nbsp;type='text'&nbsp;className='no-drag'\/&gt;&lt;\/div&gt;)},]ReactDOM.render(&lt;DragSortableList&nbsp;items={listWithNoDrag}&nbsp;onSort={onSort}\/&gt;,&nbsp;document.getElementById('main'));<\/pre>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#full-example\"><\/a><\/h2>\n\n\n\n<h2>Full example<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">require('.\/stylesheets\/styles.scss');&nbsp;import&nbsp;React&nbsp;from&nbsp;'react'import&nbsp;ReactDOM&nbsp;from&nbsp;'react-dom'&nbsp;\/\/&nbsp;Componentsimport&nbsp;DragSortableList&nbsp;from&nbsp;'..\/src\/dragSortableList.jsx'&nbsp;var&nbsp;placeholder&nbsp;=&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;className=\"placeholderContent\"&gt;&nbsp;DROP&nbsp;HERE&nbsp;!&nbsp;&lt;\/div&gt;);&nbsp;var&nbsp;list&nbsp;=&nbsp;[&nbsp;\t{content:&nbsp;(&lt;span&gt;test1&lt;\/span&gt;),&nbsp;classes:['test',&nbsp;'bigger']},&nbsp;\t{content:&nbsp;(&lt;span&gt;test2&lt;\/span&gt;),&nbsp;classes:['test']},&nbsp;\t{content:&nbsp;(&lt;span&gt;test3&lt;\/span&gt;),&nbsp;classes:['test']},&nbsp;\t{content:&nbsp;(&lt;span&gt;test4&lt;\/span&gt;),&nbsp;classes:['test',&nbsp;'bigger']}];&nbsp;var&nbsp;listHorizontal&nbsp;=&nbsp;[&nbsp;\t{content:&nbsp;(&lt;div&gt;test1&lt;\/div&gt;),&nbsp;classes:['bigger']},&nbsp;\t{content:&nbsp;(&lt;div&gt;test2&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test3&lt;\/div&gt;),&nbsp;classes:['bigger']},&nbsp;\t{content:&nbsp;(&lt;div&gt;test4&lt;\/div&gt;)}];&nbsp;var&nbsp;listGrid&nbsp;=&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test1&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test2&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test3&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test4&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test5&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test6&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test7&lt;\/div&gt;)},&nbsp;&nbsp;&nbsp;&nbsp;{content:&nbsp;(&lt;div&gt;test8&lt;\/div&gt;)},&nbsp;\t{content:&nbsp;(&lt;div&gt;test9&lt;\/div&gt;)}];&nbsp;&nbsp;var&nbsp;onSort&nbsp;=&nbsp;function(sortedList)&nbsp;{&nbsp;\tconsole.log(\"sortedList\",&nbsp;sortedList);&nbsp;}&nbsp;ReactDOM.render(&lt;DragSortableList&nbsp;items={list}&nbsp;moveTransitionDuration={0.3}&nbsp;onSort={onSort}&nbsp;type=\"vertical\"\/&gt;,&nbsp;document.getElementById('example1'));ReactDOM.render(&lt;DragSortableList&nbsp;items={listHorizontal}&nbsp;moveTransitionDuration={0.3}&nbsp;dropBackTransitionDuration={0.3}&nbsp;placeholder={placeholder}&nbsp;onSort={onSort}&nbsp;type=\"horizontal\"\/&gt;,&nbsp;document.getElementById('example2'));ReactDOM.render(&lt;DragSortableList&nbsp;items={listGrid}&nbsp;dropBackTransitionDuration={0.3}&nbsp;onSort={onSort}&nbsp;type=\"grid\"\/&gt;,&nbsp;document.getElementById('example3'));<\/pre>\n\n\n\n<p>The example (containing both vertical and horizontal lists along with\n more complex styling) can be found in the demo folder and run using \nwebpack with<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm&nbsp;run&nbsp;dev<\/pre>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#tests\"><\/a><\/h2>\n\n\n\n<h2>Tests<\/h2>\n\n\n\n<p>These will be added soon. Please do not hesitate to add some !<\/p>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#about-the-author\"><\/a><\/h2>\n\n\n\n<h2>About the Author<\/h2>\n\n\n\n<p>I am a full-stack Javascript developer based in Lyon, France.<\/p>\n\n\n\n<p><a href=\"http:\/\/www.thomschell.com\">Check out my website<\/a><\/p>\n\n\n\n<h2><a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable#license\"><\/a><\/h2>\n\n\n\n<h2>License<\/h2>\n\n\n\n<p>react-drag-sortable is dual licensed under the MIT license and GPL. For more information click <a href=\"https:\/\/opensource.org\/licenses\/MIT\">here<\/a>.<\/p>\n\n\n\n<p>\u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b: <a href=\"https:\/\/www.npmjs.com\/package\/react-drag-sortable\">https:\/\/www.npmjs.com\/package\/react-drag-sortable<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Installation npm&nbsp;install&nbsp;react-drag-sortable Description Make a list of elements (array) sortable by drag and [&hellip;]","protected":false},"author":1,"featured_media":2998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[71],"tags":[],"_links":{"self":[{"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/posts\/2972"}],"collection":[{"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2972"}],"version-history":[{"count":1,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/posts\/2972\/revisions"}],"predecessor-version":[{"id":2973,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/posts\/2972\/revisions\/2973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=\/wp\/v2\/media\/2998"}],"wp:attachment":[{"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cryptedbrain.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}