Amchart/Draggable div/chart

Question

Я пробовал различные способы перетащить амчарту вокруг страницы. У меня есть около 10 диаграмм на странице. Я хотел бы позволить пользователю перемещать любой график рядом с любым другим. Как только требуемый div будет перемещен в другое место, я бы хотел, чтобы все divs автоматически перестраивались так же, как и при первом рисовании. (Я имею в виду, когда div перемещается, скажем, рядом с последним графиком на странице, я бы не хотел видеть пустое место, откуда был перемещен div. Мне бы хотелось, чтобы div рядом с ним скользнул в пустое место div). Чтобы построить каждый график, я создаю два div HTML: один называется родительским div, который служит в качестве контейнера для инкапсуляции дочернего div, на котором график является графиком.

Класс CSS применяется для родительского DIV является один ниже

.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%; 
} 

Класс CSS применяется к DIV, который содержит диаграмму ниже

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

Я следовал Jquery подход draggable(), но не были успешными. Я попытался применение метода на набросок DIV Ids индивидуален, как описано здесь - https://jqueryui.com/draggable/ & также путем применения метода на оба вышеуказанных классах CSS, как описано здесь - http://stackoverflow.com/a/13729390/5366075

Ни один из этих подходов не похоже на работу.

Я тоже не мог найти пример. Могу ли я запросить некоторые сведения о том, как это реализовать?

Answer 1

Я подготовил для вас example. Он использует jQuery UI sortable.

Чтобы сохранить взаимодействие с графиками возможным Я использовал этот код:

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

и добавил некоторое пространство вокруг диаграммы, чтобы сохранить элементы списка интерактивными, так что вы можете сортировать элементы.