Possible bug in getBoundingRectNoTransforms(el) but unable to reliably reproduce, and a crazy suggestion for readme.

[catpea]

I did some crazy jageddy dragging in HTML decorated with Bootstrap and started getting el is undefined errors, in src/helpers/intersection.js export function getBoundingRectNoTransforms(el)... I am very sorry but I don't have more information on that. I recommend you close/ignore this issue until you get more info on it.

I created a very simple drag and drop solution for a very simple use case, and I was wondering if perhaps you could crate a new section in your README entitled "Who is Svelte dnd action for" where you copy and paste some stuff from the top of the README again, and present this here code for people who just want to sort the list without any extras.

My code is as minimal as it gets, though I did make sure to deny drop if the user is trying to drop a thing on top of it self. And I am casting string to integer, though both of these are optional and not need for operation.

The theory of operation is, that there is no drop zone, but that each item is both draggable and a drop zone for other items. The drag start event grabs the index once we start dragging, BUT! the drop event, uses index from when that node was created! So drag start will happen later in the program, and dragover/drop are using index from when the thing is created.

<script>

  let selected;

  let list = [
         {id: 1, title: "I"},
         {id: 2, title: "Am"},
         {id: 3, title: "Yoda"}
  ];

  $: selection = list.filter(o=>o.id==selected)[0];

</script>

<div class="col-4 mb-3">
  <div class="card text-bg-dark">
    <div class="card-header">
    List
    </div>

      <ul class="list-group list-group-flush">
        {#each list as item, index (item.id)}
          <li
          draggable="true"
          on:dragstart={(event)=>event.dataTransfer.setData("text/plain", index)}
          on:dragover={(event)=>(parseInt(event.dataTransfer.getData("text/plain"))==index)?null:event.preventDefault()}
          on:drop={(event)=>{event.preventDefault(); list.splice(index, 0, list.splice(parseInt(event.dataTransfer.getData("text/plain")), 1)[0]); list=list;}}
          class="list-group-item text-bg-dark" on:click={()=>{selected=item.id; console.log(selected)}}>
          {item.title}
          </li>
        {/each}
      </ul>

  </div>
</div>

I am happy and proud to contribute a little idea to your fancy project, and I admire the use of use:action here, that is very cool.

Thank you for your time and programming.

[isaacHagoel]

Hi, Thanks for taking the time to create this issue. Did you get this issue with the latest version of the lib? would be amazing if u send over a REPL that reproduces the issue and/or the exact error you get in the console. The example you included makes use of the browser's built in dnd implementation. Ironically, my frustration with it was one of the main reasons I decided to implement this lib :)

[stefanwatt]

I'm encountering the same issue. Happens pretty reliably for me on the current iteration of my TierList app. Here's the repo.

To reproduce clone the repo, npm run dev and do the following steps:

1. Add new item by clicking on the plus button and choose either option (text/image) doesn't matter which.
2. Pick up the new item, drag it over a tier and keep holding. Once you arrive and the animation completes you should see a first error in the console saying: "Error: missing 'id' property for item { "isDndShadowItem": true }
3. Drop the item and you should see a second error which is the same as desribed by @catpea. Uncaught TypeError: el is undefined

[isaacHagoel]

Can you make a small REPL that reproduces the issue so I can have a look at it? The first error message looks quite telling to me and it is most likely the actual problem and if fixed will make the second one go away as well. Are you not passing items that have a unique id each?

On Thu, Oct 20, 2022 at 8:23 AM stefanwatt @.***> wrote:

I'm encountering the same issue. Happens pretty reliably for me on the current iteration of my TierList app. Here's the repo https://github.com/stefanwatt/tierlist.

To reproduce clone the repo, npm run dev and do the following steps:

1. Add new item by clicking on the plus button and choose either option (text/image) doesn't matter which.
2. Pick up the new item, drag it over a tier and keep holding. Once you arrive and the animation completes you should see a first error in the console saying: "Error: missing 'id' property for item { "isDndShadowItem": true }
3. Drop the item and you should see a second error which is the same as desribed by @catpea https://github.com/catpea. Uncaught TypeError: el is undefined

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/389#issuecomment-1284588948, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ24G6NHRUWFCQNG5DWEBREFANCNFSM53YJXYSQ . You are receiving this because you commented.Message ID: @.***>

[stefanwatt]

I was giving unique ids, but I also had another element in the dnd container that wasn't part of the each block. I guess that was causing the problem. After I moved it to another container the problem is gone. Bothers me a little bit cause it fucks with my layout. I would also appreciate the feature requested in #386.

[isaacHagoel]

This feature would add a bunch of complexity and strange edge cases and I never saw an example that convinced me that it would be worth it.

On Fri, Oct 21, 2022 at 5:28 AM stefanwatt @.***> wrote:

I was giving unique ids, but I also had another element in the dnd container that wasn't part of the each block. I guess that was causing the problem. After I moved it to another container the problem is gone. Bothers me a little bit cause it fucks with my layout. I would also appreciate the feature requested in #386 https://github.com/isaacHagoel/svelte-dnd-action/issues/386.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/389#issuecomment-1285971205, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ45T5I7O3T5RUOJITWEGFLTANCNFSM53YJXYSQ . You are receiving this because you commented.Message ID: @.***>

[zippy]

I consistently have the same problem. I don't have any extra items in the list and they all have unique ids. Don't know how to make something small that would replicate this.

[isaacHagoel]

I want to help but need a way to debug or reproduce

On Thu, Feb 2, 2023 at 3:54 AM Eric Harris-Braun @.***> wrote:

I consistently have the same problem. I don't have any extra items in the list and they all have unique ids. Don't know how to make something small that would replicate this.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/389#issuecomment-1412387546, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC3HRLZSLIHBGUAPVATWVKIMRANCNFSM53YJXYSQ . You are receiving this because you commented.Message ID: @.***>