Question

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

应用于父div的CSS类是

下面的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"
  });

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

Amchart / Draggable div / chart

1 个答案: