To prevent tiny displacements which are noticeable on drop when width or height of an item has fractional part:

Is there a way to have lists within lists, for example in a nested list hierarchy like so?

- A
    - A1
        -A1a
        -A1b
    -A2
-B

Not in any way a critical issue, just something to think about...

I'd argue Webapi is almost as common as reason-react as a dependency. So when most people have it installed anyway, it will cause awkward "Duplicated package" warning that could be avoided just by defining it as a peer dependency.

I have installed re-dnd and added it to bsconfig.json. Then when I compile my project I get

[141/255] Building src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.cmj
FAILED: src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.cmj src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.cmi /home/a-c-sreedhar-reddy/***/demo/node_modules/bs-webapi/src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.js 
/home/a-c-sreedhar-reddy/***/demo/node_modules/bs-platform/linux/bsc.exe -color always -bs-package-name bs-webapi  -bs-package-output es6:src/Webapi/Webapi__Dom -I src/Webapi/Webapi__ResizeObserver -I src/Webapi/Webapi__Dom -I src/Webapi/Webapi__Canvas -I src/Webapi -I src -w a -bs-no-version-header -bs-super-errors -o src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.cmj src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.reast

  We've found a bug for you!
  /home/a-c-sreedhar-reddy/***/demo/node_modules/bs-webapi/src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.re 11:5-7
  
   9 │ let set = (key, value, map) => set(map, key, value);
  10 │ let unsafeDeleteKey: (key, t) => unit =  
  11 │   [%raw (key, map) => "delete map[key];"];
  12 │   
  
  Error: internal error, using unrecognized primitive #raw_function
  
[146/255] Building src/Webapi/Webapi__Dom/Webapi__Dom__EventTarget.cmj
FAILED: subcommand failed.
Failure: /home/a-c-sreedhar-reddy/***/demo/node_modules/bs-platform/linux/ninja.exe 
 Location: /home/a-c-sreedhar-reddy/***/demo/node_modules/bs-webapi/lib/bs

I wanted to update the cursor for my Draggable Items to be grab and then grabbing while dragging, but it wasn't working. In doing some digging, I've found that adding pointer-events: none disables the use cursor (yay CSS 🙄).

I definitely understand the reasoning behind setting pointer-events: none, but I wonder if there'd be way to set it on the underlying child of DraggableItem instead of that <div/> itself, so you could still set the cursor prop of the div? 🤔

There may not be an easy/workable fix here, but I figured I'd file it anyway just to see if you had any ideas. Thanks!

Compilation throws this error:

FAILED: src/Dnd__DndManager.cmj

  We've found a bug for you!
  /home/development/app/node_modules/rescript-dnd/src/Dnd__DndManager.res:1586:13-1602:7

  1584 ┆ 
  1585 ┆ <Context.Provider
  1586 ┆   value={
  1587 ┆     status: state.status,
     . ┆ ...
  1601 ┆     startDragging: collectEntries,
  1602 ┆   }>
  1603 ┆   children
  1604 ┆ </Context.Provider>

  The record field value can't be found.
  
  If it's defined in another module or file, bring it into scope by:
  - Prefixing it with said module name: TheModule.value
  - Or specifying its type: let theValue: TheModule.theType = {value: VALUE}

For more info: https://rescript-lang.org/docs/react/latest/migrate-react

We are upgrading all of our packages to use rescript (moving from reason) and seems like res-logger doesn't work. Looking at master, this has been changed to rescript-logger but the npm package hasn't been updated to reflect this.

Can you please do another release. Thank you.

Ideally, placeholder should be removed from original droppable when draggable is over external droppable but it's not trivial to invalidate layout since removal is animated.

Just started using this lib and it was so easy to get up and running - thanks so much!

I was wondering what you thought of adding a way to know when the Items.DraggableItem component was in the midst of being dragged, other than just when specifying the className prop. My use case is that my app uses React Native Web, so the styling API isn't based on class names. I can think of a few escape hatches I could use, but it'd be great if the library supported tracking that state change somehow.

Not sure if it'd make more sense to add another variant for the component's children that was a render function that contained the state, or possibly it'd make more sense to have another handler at the DndManager level that fired whenever an item started being dragged so you could do a more global state update if you needed? I'm sure you've got a better handle on what would be best performance-wise!

Thanks!

1. Use pointer when one dimension is significantly smaller than another (the way it's implemented now)
2. Use a center of rectangle when both dimensions are approximately equal

1: Ok

2: Should be improved

Looks like bs-webapi hasn't been touched in a year, whereas rescript-webapi is under active development (I'm not affiliated with either). If the bindings are the same but just updated, then might be good to update this.

Would also be great to add a note to Readme to go install that package too (not sure if it's obvious for others but I'm new to Rescript and was a bit surprised).

Note how easily Todo 11 can be dropped at the end of List 2 whenever it started its drag from List 2. When the drag starts from List 1 however, the drop zone is only the size of the original element, it does not expand to the visible element size.

Hello,
I have an issue with re-dnd. What I'm trying to do is: I have a static list of "source" items, that can be inserted (without being removed) into another drag zone.

When I drop an item, Option.getExn is raised.

Here is an (almost) minimal reproducing code:

module Id = {
  type t = int;
  let current = ref(0);

  let make = () => {
    current := 1 + current^;
    current^ - 1;
  };
};

module Item = {
  type t = (Id.t, string);

  let eq = (x1, x2) => x1 == x2; // or more concise: let eq = (==);
  let cmp = compare; // default comparator from Pervasives module
};

module Container = {
  type t =
    | A
    | B;
  let eq = (x1, x2) => x1 == x2; // or more concise: let eq = (==);
  let cmp = compare; // default comparator from Pervasives module
};

let sources = ["a", "b", "c"];

module MyDrag = Dnd.Make(Item, Container);

[@react.component]
let make = () => {
  let reducer = (state, action: Dnd.result(Item.t, Container.t)) => {
    switch (action) {
    | Some(SameContainer(todoId, placement)) =>
      Js.log3("Drag same", todoId, placement);
      state;
    | Some(NewContainer(todoId, targetId, placement)) =>
      Js.log4("Drag new", todoId, targetId, placement);
      [todoId, ...state];
    | None => state
    };
  };

  let (state, dispatch) = React.useReducer(reducer, [((-2), "z"), ((-1), "y")]);

  let rowStyle = ReactDOMRe.Style.make(~display="flex", ~flexDirection="row", ());

  let dndZoneStyle =
    ReactDOMRe.Style.make(~minWidth="100px", ~minHeight="100px", ~background="lightgrey", ~border="1px solid", ());

  <div style=rowStyle>
    <MyDrag.DndManager onReorder={res => dispatch(res)}>
      <MyDrag.DroppableContainer id=A axis=Y>
        <div style=dndZoneStyle>
          {List.mapi(
             (index, item) => {
               <MyDrag.DraggableItem id=(Id.make(), item) containerId=A index key=item>
                 {`Children(item->React.string)}
               </MyDrag.DraggableItem>
             },
             sources,
           )
           ->Array.of_list
           ->React.array}
        </div>
      </MyDrag.DroppableContainer>
      <MyDrag.DroppableContainer id=B axis=Y>
        <div style=dndZoneStyle>
          {List.mapi(
             (index, (id, item)) => {
               <MyDrag.DraggableItem id=(id, item) containerId=B index key=item>
                 {`Children(item->React.string)}
               </MyDrag.DraggableItem>
             },
             state,
           )
           ->Array.of_list
           ->React.array}
        </div>
      </MyDrag.DroppableContainer>
    </MyDrag.DndManager>
  </div>;
};