Amchart/ Draggable div/chart

Question

I've tried various ways to drag an amchart around the page. I have got about 10 charts on the page. I would like to let the user to move any chart next to any other. Once the required div is moved out to another location, I'd like all the divs to realign automatically as they do when they are drawn for the first time.( I mean when a div is moved to, say, next to last graph on the page, I wouldn't like to see an empty space from where the div was moved. I'd like to see the div next to it slide to the empty div's place). To plot every chart, I create 2 HTML divs - One called the parent div that serves as a container to encapsulate the child div on which the chart is plot.

The CSS class applied to the parent div is the one below

.graphParentDiv{
    display: inline-block;
    padding-bottom: 2%;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    border: none;
    border-radius: 25px;
    box-shadow: 0 0 3pt 2pt #337ab7;
    outline: none !important;
    width: 48%;
}

The CSS class applied to the div that holds the chart is below

.graphDiv{
    /*  margin-left: 2%;*/
    width:100%;
    height:500px;
    font-size: 19px;    
}

I've followed the jquery approach of draggable() but haven't been successful. I tried applying the method on the charting div Ids individually as detailed here - https://jqueryui.com/draggable/ & also by applying the method on both the above CSS classes as detailed here - http://stackoverflow.com/a/13729390/5366075

None of these approaches seem to work.

I couldn't find an example of this either. Could I request some intelligence on how to implement this?

Answer 1

I've prepared an example for you. It's using jQuery UI sortable.

To keep the interaction with the charts possible I used this code:

  $( "#sortable" ).sortable({
    cancel: ".amcharts-main-div"
  });

and added some space around the charts to keep the list elements clickable, so you can still sort the elements.