Drag item from one DraxList into another

[ChristopheSnacken]

What I try to get done: I have two horizontal draxlists. I want to drag 1 item from list 1 to list 2 but continue the drag until release of the item in the correct position in list 2.

What I did so far: I've added a function in Draxlist in the onMonitorDragOver function to move the dragged item in list 1 to list 2 when entering list 2. My function just changes my own data which triggers an update in the draxlists.

What I still need to figureout: How can I trigger dragStart of the "new" item in list 2 in order to continue the drag in the new draxlist.

Does anyone have an idea how to get this done? Or is there a better way to move item from one list to another without losing drag on enter.

[lafiosca]

Let me preface this by apologizing for the state of maintenance of this library right now. Personal circumstances have not afforded me the time to do any deep work on Drax for a while, and I am not fresh on the code. I have a Drax logic documentation project in progress but presently on hold. The goal with that is to make it easier for myself and others to maintain the library without accidentally breaking or changing functionality. I do however keep an eye on the issues and try to answer things off the top of my head if I am able.

You raise a good question. The use case is clear and valuable.

I don't believe the current code provides a way to add an item to list 2 and have it immediately be in a dragging state. It might be possible to add this sort of functionality to the library, but I question what the best interface for that would be. Perhaps an additional prop to DraxList that allows you to explicitly override the state, but that sounds very fiddly. I am open to ideas here.

I think perhaps what would make more sense is to bake the functionality you're requesting directly into the DraxList in the library. This of course would also require new code and be considered a feature enhancement.

As I mentioned above though, I am not sure how soon I will be able to work on such a thing. If you are comfortable attempting it yourself, pull requests are accepted, but I have several outstanding that I have not had time to review thoroughly. I realize that this is a frustrating answer, and again I apologize, but I do not want to make promises about my time that I cannot keep. As a stopgap in the meantime, I encourage people who create pull requests to use patch-package or private forks until I can review their changes and integrate them into a release.

[ChristopheSnacken]

Thx for the reply (and sorry for my late one). I will try to get it working and will make it available for review if I succeed in a good way. In the meantime I will keep an eye on any changes if you figure it out earlier.

[rnz269]

@ChristopheSnacken By any chance, were you able to get this working (even if in a not-so-clean way)? My use case is identical to yours: render two horizontal draxlists, allowing items to be dragged from one list to the other.

Even if you weren't able to continue the drag into the second horizontal draxlist, it would be very helpful to see the function you added to the onMonitorDragOver function. I'm trying to replicate, but so far getting some funky behavior.

[likon416]

@lafiosca is there any update regarding that topic? I choose this drag & drop plugin as I thought it will support it. It's the main thing I'm looking for. Would be great if this functionality would be added.

[lafiosca]

@likon416 Sadly not yet. It will require some data rework. I have been recently finding a tiny bit more time for Drax maintenance though, so I will try to give the approach a little thought later this week if I’m able.

[likon416]

@lafiosca that would be great. I think this can be the no. 1 drag & drop plugin.

Another thing that I see missing is that on my list item I would like to support long-press so it can do something with the item like change state to done for example. But the drag & drop kicks in and preventing long press on my item. Is there any way to make it work together?

[lafiosca]

If you could, please open another issue with that feature request @likon416. I don’t think the library currently supports it, and it might be tricky to make work because we rely on the long press gesture for drag... but I think there are ways we could try to implement it.

[likon416]

@lafiosca that would be great if you could add these features mentioned above. Please let me know when you do.

Also thanks for all your hard work on it, much appreciated.

[lafiosca]

You're welcome @likon416, but I don't want to get your hopes up that these features will be implemented quickly. My availability for deep work on Drax over the past year has been very limited and spotty. I will do what I can, and I'm also happy to discuss pull requests from other contributors.

[admapop]

It is possible to do with some custom logic, combining DraxView and DraxList

[admapop]

It is possible to do with some custom logic, combining DraxView and DraxList

You wrap the DraxList in a DraxView, assign recognisable ids to both, set a piece of state whether the DraxView is receptive or not, and then change that state between true and false inside the lifecycle methods depending on some logic. For example you'd need these on the DraxView:

onMonitorDragOver={(event) => {
  const { dragged, receiver } = event;
  if (!dragged.parentId.includes('part-of-your-id')) {
    setYourReceptiveStateVariable(true);
    return;
  }
  setYourReceptiveStateVariable(false);
   }}
onMonitorDragDrop={(event) => {
  if (
        !isYourReceptiveStateVariable ||
        event.dragged.parentId.includes('part-of-your-id')
      )
        return;
  /*
    Logic which adds item to the DraxList
  */
}}

So here, let's say you'd have DraxView with id first-view and DraxList with id first-list, and another set of view and list with second in their id. When you drag an item from the first list and move it over to the second list, you'd have !dragged.parentId.includes('second') return true which would set that DraxView as receivable and inside onMonitorDragDrop you would add the dragged item to whatever state you're using to display the second DraxList.

If you want to reorder and you drag an item in the first list, and drag over the same list, !dragged.parentId.includes('first') would return false and it would set the first DraxView as non receivable and the underlying DraxList will take over and you'll be able to use onItemReorder to change the order of the items in the list.

I might share a snack.

EDIT: This does not solve the problem of being able to instantly reorder in the second list. You need to drop first and then drag and drop again to reorder in the same list.

[lafiosca]

Thank you for sharing this approach. I really wish I had more availability to work on enhancing the library for features like this and bringing it up to date with the latest RNGH, as well as other protocol improvements I have in mind... but at present that is just not happening.