1

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?

usert4jju7
  • 1,653
  • 3
  • 27
  • 59

1 Answers1

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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
gerric
  • 2,297
  • 1
  • 14
  • 32
  • Hello Gerric - Thank you very very much. Just so much available out there today to use. To add to it, the smartness like you've demonstrated is highly appreciable. Thank you very much again. – usert4jju7 Jan 18 '16 at 19:26
  • Hello Gerric - If I may ask another question, is it possible to exchange the positions rather than let the li item make room for the one being moved? Example - Let's say 1,2,3,4,5 are the elements. when I drag 5 to before 2( Intention is to swap 2 & 5), the order becomes 1,5,2,3,4. It would be awesome if I can swap 2 & 5 & make it look 1,5,3,4,2 – usert4jju7 Jan 18 '16 at 20:09
  • I don't have the time to look into this. Maybe [this](http://stackoverflow.com/questions/13154999/jquery-sortable-swap-elements-instead-insert) can help. Or take a look at the [API documentation](http://api.jqueryui.com/sortable/). – gerric Jan 18 '16 at 21:24
  • yep it did. Thank you very very much – usert4jju7 Jan 20 '16 at 10:41