Amchart/可拖动 div/chart

Question

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

应用于父div的CSSclass就是下面那个

.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 class 应用于div 持有图表如下

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

我遵循了 draggable() 的 jquery 方法，但没有成功。我尝试在图表 div IDs individually 上应用该方法，详见此处 - https://jqueryui.com/draggable/ & 还通过在上述 CSS classes 上应用该方法，详见此处 -

None 这些方法似乎有效。



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

Answer 1

我已经准备好了example for you. It's using jQuery UI sortable。

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

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

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

Amchart/可拖动 div/chart

Amchart/ Draggable div/chart

html

javascript

amcharts