Search code examples
javascriptcssposition

How to implement a drag and swap effect in CSS and JS

All:

Right now, say I have 4 DIV elements on the page, what I want to implement is drag a one DIV and move to other DIV then they can swap position just like IPHONE, when you hold the icon for a little while, all the icons turn into position edit mode, you can move icon around the screen and located to certain grid position and according icon can swap with it.

Could anyone show me an example for this?

Thanks

Solution

  • Jquery UI makes this trivial:

    https://jqueryui.com/draggable/#sortable

    http://jqueryui.com/sortable/#default

    The link also shows an example of how to use it.