Amchart / Draggable div /图表 [英] Amchart/ Draggable div/chart

问题描述

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

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

  .graphParentDiv {
 display：inline-block; 
 padding-bottom：2％; 
保证金底部：1％; 
保证金余额：1％; 
保证金率：1％; 
 border：none; 
 border-radius：25px; 
 box-shadow：0 0 3pt 2pt＃337ab7; 
概要：无！重要; 
宽度：48％; 
} 
  

应用于包含图表的div的CSS类低于

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

我遵循的jquery方法draggable（ ）但没有成功。我试着单独在图表div中使用该方法，详细信息在这里 - https://jqueryui.com/draggable/
&也可以通过在上述两个CSS类上应用该方法 - http://stackoverflow.com/a/13729390/5366075

这些方法都无效。

我找不到这样的例子。我可以请求一些关于如何实现这个功能的信息吗？

我准备了 example 。它使用可排序的jQuery UI 。

保留与图表的交互可能我使用这段代码：

  $（#sortable）.sortable（{
取消：.amcharts-main-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.

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

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

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

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?

解决方案

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 / Draggable div /图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！