Amchart/ 可拖动的 div/图表

Question

我尝试了各种方法在页面上拖动 amchart。我在页面上有大约 10 个图表。我想让用户将任何图表移动到任何其他图表旁边。将所需的 div 移到另一个位置后，我希望所有 div 像第一次绘制时那样自动重新对齐。（我的意思是当 div 移动到上一个图表旁边时页面，我不希望看到 div 被移动的地方的空白空间。我希望看到它旁边的 div 滑动到空 div 的位置）。为了绘制每个图表，我创建了 2 个 HTML div - 一个称为父 div，它充当容器来封装绘制图表的子 div。

应用于父 div 的 CSS 类是下面的一个

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

应用于保存图表的 div 的 CSS 类如下

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

我遵循了draggable() 的jquery 方法，但没有成功。我尝试在图表 div Id 上单独应用该方法，详见此处 - https://jqueryui.com/draggable/ & 还通过在上述两个 CSS 类上应用该方法，详见此处 - http://stackoverflow.com/a/13729390/5366075

这些方法似乎都不起作用。

我也找不到这样的例子。我可以请求一些有关如何实现此功能的情报吗？

Answer 1

我已经为您准备了example。它正在使用jQuery UI sortable。

为了尽可能保持与图表的交互，我使用了以下代码：

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

并在图表周围添加了一些空间以保持列表元素可点击，因此您仍然可以对元素进行排序。