Amchart/可拖动div/图表 [英] Amchart/ Draggable div/chart

问题描述

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

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.

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

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

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

The CSS class applied to the div that holds the chart is below

.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

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?

推荐答案

我准备了一个 示例 适合您.它使用 jQuery UI 可排序.

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.

这篇关于Amchart/可拖动div/图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！