Snapping Problem when dragging elements

[zellfrey]

Currently I am writing a class that will handle the initiation of new Draggable objects. However i seem to be having the problem that when 2 or more objects/elements are made and run the process they have a weird behaviour of snapping.

const drag1 = () => {
return new PlainDraggable(document.getElementById('block1'))
}

drag1().snap = {x: {step: 10}, y: {step: 20}};
const drag2 = () => {return new PlainDraggable(document.getElementById('block2'))}
drag2().snap = {x: {step: 10}, y: {step: 20}};

This works fine and there are no odd behaviours. However Ive tried to clean up my code by using classes instead of have to create separate functions for each draggable item;

class Furniture{

         addToRoom(){
        //console.log(this.el);
        const dropArea = document.querySelector('.dropArea');
        dropArea.appendChild(this.el)
        Room.addDragToElement();
        }
}

Each Furniture object is passed into the addToRoom function which then adds the furniture element into the dropArea element. Thats then passed to the Room class which tries to add drag;

static addDragToElement(){
        const dropArea = document.querySelector('.dropArea');
        //console.log(dropArea.lastElementChild)
        return new PlainDraggable(dropArea.lastElementChild)
    }

It creates a new Draggable class then returns that allowing the new furniture objects to be draggable within the Room. However this has the snapping issue. Am i missing something, am i dumb? Could i get some help please

Apologies in advance for poor format.

[anseki]

Hi @Beardedflea, thank you for the comment.

So, what is the "Snapping Problem"? It seems that you forgot to write it. Could you indicate an expected result and an actual result? Also, to reproduce your case, could you show example? E.g. using https://jsfiddle.net/

BTW, I fixed the format of your comment. See document: https://help.github.com/articles/about-writing-and-formatting-on-github/ You can communicate that correctly and quickly if you write it correctly.

[zellfrey]

The following draggables use the code with individual functions:

https://gfycat.com/BitesizedNiftyBushsqueaker

The new draggables that were created using the Room class seem to act in this way:

https://gfycat.com/OrganicBlaringGrackle

The expected result is to have the newly created draggables not have this snapping behaviour, and although i wasn't able to show it when they do 'snap' it also changes the container dimensions of the blue draggables.

[anseki]

Hmm..., it seems that the new draggable doesn't have snap that is your expected result. Sorry, my English is poor. What is the "Snapping Problem"? Also, to reproduce your case, could you show example? E.g. using https://jsfiddle.net/ Because GIF animations don't have any meaning for anyone other than you. That is, nobody know your expected result and your code, and nobody can execute your code by GIF animations. You can indicate that by using https://jsfiddle.net/.

[anseki]

For example: https://jsfiddle.net/qfb2hyg4/ You can read all source code, and you can execute the code in the bottom-right box.

[anseki]

I tried to simulate your animation because I don't know what you want to do: https://jsfiddle.net/pb2kjrd1/

[zellfrey]

Apologies for the delay in response, we were busy with the project however I have good news. Turns out my friend has better eyes than me and found that when we clicked on the 'furniture' in the container the eventlistener that was assigned to the individual element was persisting as it entered into the draggable area.

This is what caused the snap issue, as we believe the act of clicking on the elements called the function of adding the element on the draggable area.

Fortunately it was a 1 line fix of removing the eventlistener once the elements have moved over, and so the bug was fixed.

Thanks for the help it was greatly appreciated, and apologies for the vague debugging issue

[anseki]

I see. Ok, no problem. :smile: Yes, this code also removes event listener. https://jsfiddle.net/pb2kjrd1/

So, could you close this issue because it was solved?

[zellfrey]

Yes of course. Thanks for the help and patience!