SHARE
TWEET

Untitled

a guest Aug 18th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from "react";
  2. import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
  3.  
  4. function App() {
  5.   const [items, updateItems] = useState([1, 2, 3, 4, 5]);
  6.   const [selected, updateSelected] = useState([6, 7, 8]);
  7.  
  8.   const reorder = (list, startIndex, endIndex) => {
  9.     const result = Array.from(list);
  10.     const [removed] = result.splice(startIndex, 1);
  11.     result.splice(endIndex, 0, removed);
  12.     return result;
  13.   };
  14.  
  15.   const onDragEnd = result => {
  16.     if (!result.destination) return;
  17.     if (result.source.droppableId === result.destination.droppableId) {
  18.       if (result.source.droppableId === "items") {
  19.         const list = reorder(
  20.           items,
  21.           result.source.index,
  22.           result.destination.index
  23.         );
  24.         updateItems(list);
  25.       } else {
  26.         const list = reorder(
  27.           selected,
  28.           result.source.index,
  29.           result.destination.index
  30.         );
  31.         updateSelected(list);
  32.       }
  33.     } else {
  34.       const r = move(
  35.         result.source.droppableId === "items" ? items : selected,
  36.         result.destination.droppableId === "items" ? items : selected,
  37.         result.source,
  38.         result.destination
  39.       );
  40.       updateItems(r.items);
  41.       updateSelected(r.selected);
  42.     }
  43.   };
  44.  
  45.   const move = (source, destination, droppableSource, droppableDestination) => {
  46.     const sourceClone = Array.from(source);
  47.     const destClone = Array.from(destination);
  48.     const [removed] = sourceClone.splice(droppableSource.index, 1);
  49.  
  50.     destClone.splice(droppableDestination.index, 0, removed);
  51.  
  52.     const result = {};
  53.     result[droppableSource.droppableId] = sourceClone;
  54.     result[droppableDestination.droppableId] = destClone;
  55.  
  56.     return result;
  57.   };
  58.  
  59.   return (
  60.     <div
  61.       style={{
  62.         display: "flex",
  63.         "justify-content": "space-between",
  64.         width: "50vw",
  65.         margin: "auto",
  66.         marginTop: 24
  67.       }}
  68.     >
  69.       <DragDropContext onDragEnd={onDragEnd}>
  70.         <Droppable droppableId="items">
  71.           {(provided, snapshot) => (
  72.             <div
  73.               {...provided.droppableProps}
  74.               ref={provided.innerRef}
  75.               style={{
  76.                 background: snapshot.isDraggingOver ? "lightblue" : "lightgrey",
  77.                 padding: 8,
  78.                 width: 250
  79.               }}
  80.             >
  81.               <h2>Items</h2>
  82.               {items.map((item, index) => (
  83.                 <Draggable key={item} draggableId={item} index={index}>
  84.                   {(provided, snapshot) => (
  85.                     <div
  86.                       ref={provided.innerRef}
  87.                       {...provided.draggableProps}
  88.                       {...provided.dragHandleProps}
  89.                       style={{
  90.                         userSelect: "none",
  91.                         padding: 16,
  92.                         margin: "0 0 8px 0",
  93.                         background: snapshot.isDragging ? "lightgreen" : "grey",
  94.  
  95.                         ...provided.draggableProps.style
  96.                       }}
  97.                     >
  98.                       Test {item}
  99.                     </div>
  100.                   )}
  101.                 </Draggable>
  102.               ))}
  103.               {provided.placeholder}
  104.             </div>
  105.           )}
  106.         </Droppable>
  107.  
  108.         <Droppable droppableId="selected">
  109.           {(provided, snapshot) => (
  110.             <div
  111.               {...provided.droppableProps}
  112.               ref={provided.innerRef}
  113.               style={{
  114.                 background: snapshot.isDraggingOver ? "lightblue" : "lightgrey",
  115.                 padding: 8,
  116.                 width: 250
  117.               }}
  118.             >
  119.               <h2>Selected</h2>
  120.               {selected.map((item, index) => (
  121.                 <Draggable key={item} draggableId={item} index={index}>
  122.                   {(provided, snapshot) => (
  123.                     <div
  124.                       ref={provided.innerRef}
  125.                       {...provided.draggableProps}
  126.                       {...provided.dragHandleProps}
  127.                       style={{
  128.                         userSelect: "none",
  129.                         padding: 16,
  130.                         margin: "0 0 8px 0",
  131.                         background: snapshot.isDragging ? "lightgreen" : "grey",
  132.  
  133.                         ...provided.draggableProps.style
  134.                       }}
  135.                     >
  136.                       Test {item}
  137.                     </div>
  138.                   )}
  139.                 </Draggable>
  140.               ))}
  141.               {provided.placeholder}
  142.             </div>
  143.           )}
  144.         </Droppable>
  145.       </DragDropContext>
  146.     </div>
  147.   );
  148. }
  149.  
  150. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top