craft.js

craft.js copied to clipboard

Hi there,

PR #186 is long overdue but I couldn't get it to run because of some stupid git merge conflicts. So here we go again.

Here is the old text: This PR adds draggedOver to the events. It's almost the same as #37 but targets the next branch and the new EventHandlers, which also gives us a cleaner API. (#37 will be obsolete - #186 will also be obsolete ).

Since the new EventHandlers introduced a Set as the store for the EventHandlers, we can now store not only the id of the node we are dragging over, but all of its ancestors, too.

I also updated the Basic example with two different examples on how to make use of the new API.

Closes #28 Closes #183

Supersedes #186 Supersedes #37

✔️ Deploy Preview for craftjs ready!

🔨 Explore the source changes: a174c48e334d370fde591e5cbe4937b38cdf1e1e

🔍 Inspect the deploy log: https://app.netlify.com/sites/craftjs/deploys/6203dbb1a072fc0007fc3832

😎 Browse the preview: https://deploy-preview-374--craftjs.netlify.app

I wonder how useful it is to know all the nodes that's currently being dragged over; or would it be more useful to just know which parent node is the drop indicator being positioned at (which seems like the intention of this PR?)

I wonder how useful it is to know all the nodes that's currently being dragged over; or would it be more useful to just know which parent node is the drop indicator being positioned at (which seems like the intention of this PR?)

I see your point. On your screenshot, the mousepointer (albeit not visible) is hovering over the <Card /> element, which results in it being higlighted as draggedOver. However, because the drop indicator is positioned below the <Card />, the Card should not be probably highlighted.

I personally would expect the draggedOver behave as "Is drop indicator inside me (or inside some of my children)". If that passes, we should also rename it to something like "containsDropIndicator" or "isDropTarget", which is more descriptive of what actually happens, and it also avoids confusion with how the native dragOver event behaves.

Assuming the goal is to highlight the container into which the dragged component will be dropped, then what do you think about this approach? In my simple test scenario it seems to work fine.

Any updates on this?

Would love to have this too!

Any progress to use the draggedOver?

Closing due to no time available