Amcharts - sortable div moves when chart scroll bar is scrolled

Question

Further to the question here, I realized using li won't work best for me & hence upon further research & following the example here, I've manged to implement a customized version of draggable div.
In the example (quoted in the answer of the question mentioned above), moving the scroll bar of the chart doesn't move the chart. However, implementing the charting by making the div that contains the chart draggable according to (link), trying to scroll the scroll bar movs the div & with it the chart.

In (link), I've commented out the code inside the sortable function as I don't need it which makes it look as below

$(function () {
    $(".grid").sortable({
        /*tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true*/
    });
});

In addition, to make the chart not to move when scrolled, I tried adding the below code

$(function () {
    $(".grid").sortable({
        /*tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true*/
        cancel: ".amcharts-main-div"
    });
});
 $(". grid" ).disableSelection();

However, adding the "cancel" & disableSelection() makes the chart immovable.

This is tricky situation. Could I request some guidance on clubbing these two functionalities namely making the div draggable & also when the chart's scroll bar is moved the chart shouldn't move please?

How about just disabling drag on scrollbar grips? cancel: ".amcharts-scrollbar-grip-left,.amcharts-scrollbar-grip-right" Please note that you will also need to add addClassNames: true to your chart config if you want this to work. — martynasma
I used the <li> tag in the quoted answer just because I was using a template from the jQueryUI examples. You can just swap the list items with divs. Click me! — gerric
Hey Gerric - Appreciate this. Your solution helped. Could you post it as the answer please? I'll accept it as a solution. — usert4jju7
Hi @usert4jju7, I'm glad to help, although it would have been sufficient to post this question as comment on the last question, because its pretty specific dependend. Feel free to ask more questions if you're facing new problems. And btw martynasmas name is actually Martynas not just Martyn ;) — gerric

gerric gerric · Accepted Answer · 2016-01-21T08:07:07

This is pretty simple. The only thing you have to do is replacing the <li> tags with divs.

To keep it running correctly you need to modify the css selector #sortable li to #sortable > div, so it will only apply to the first level children divs and hence not mess up the AmCharts internal divs.

Heres the modified demo.

Amcharts - sortable div moves when chart scroll bar is scrolled

1 Answers