0

I'm trying to find an better solution to drag multiple elements at once, all elements snapping to a grid, with jQuery UI draggable.

I found a working solution there for the multiple drag part. I adapted it to be able to use the grid with a "round to multiple" function :

function roundM(number, multiple) {
    return Math.round(number / multiple) * multiple;
}

and saving the previous offset. You can see full code in this fiddle.

As you can see, it's working when you drag elements at a normal speed, but when dragging quickly, the other elements do not follow correctly the dragged element.

For now I can keep my solution, but if someone has a better one, I will be glad to test it :)

Thanks

Community
  • 1
  • 1
Finrod
  • 2,425
  • 4
  • 28
  • 38

1 Answers1

1

Have a look at: https://jqueryui.com/draggable/#visual-feedback

Create a helper function resulting in Html representing your selected items and use it as 'visual feedback' when setting up your draggable.

user1514042
  • 1,899
  • 7
  • 31
  • 57
  • Please try to avoid link-only answers. If the link breaks, your answer becomes useless for any future viewers. Either add some code in your answer itself as well, or post the link as a comment only. – Praxis Ashelin Apr 28 '15 at 09:07
  • That's a good idea ! But my elements are more complex than the squares of the jsFiddle and it would be confusing for the user to have helpers instead of their widgets when moving them. Btw, thanks for the idea, I will keep it in case there is no better solution – Finrod Apr 28 '15 at 09:48
  • using helper is the best way to improve performance, it'll also fix a few other problems such as unwanted drag overs etc. Getting html is very simple and lightweight solution as your visual feedback won't have no event handlers. – user1514042 Apr 28 '15 at 09:52
  • You're right, it's probably the best solution to fix this issue. Thanks :) – Finrod Apr 28 '15 at 10:22