How to implement a drag and swap effect in CSS and JS [closed]


Tags: javascript,css,position

Problem :

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.


    CSS Howto..

    Meteor how to serve multiple css for different media types?

    How to CSS Img Border on Hover without Shifting Image

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    CSS Position Help (horizontal sidebar showing up when animate content over)

    How to slide these divs continuously in loop

    How to center something I appended with js and also replace it

    How to set CSS attributes to default values for a specific element (or prevent inheritance)

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to change the background color on a input checkbox with css? [duplicate]

    How to write css for each page in rails 3

    How to override margin and right/left in css?

    How do I control the wrapping of these
  • items?
  • How to use CSS spinner in Angular2 while loading asynchronous list?

    How to align
  • to the top when higher items are hidden via CSS
  • How to style the wp_list_page in wordpress?

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to use easily svg as icon?

    How granular are CSS rem units?

    How to debug less css variables

    How can I get the dots that surround some elements to go away/become solid lines?

    How to make slide down menu to slide up?

    how to create two divs shapes to overlay each other

    How to make LESS combine CSS rules with a comma

    How to use CSS transition to animate dropdown menu?

    How to define changing css property based on incrementing class names?

    How to do caption hover effect on a background?

    How to make the contents of an HTML table fit within their cells?

    How to apply CSS to a DialogBox using ClientBundle?

    How to give an element with an id a certain CSS property if it has a class?