javascript - highcharts draggable-points 拖动和点击之间的冲突

Question

我正在使用带有可拖动点模块的 highcharts 3.0.7，以便可以拖动显示系列的点。

用户应该能够拖动一个点来移动它，也可以点击一个点来删除它。

问题是拖动事件接管了点击事件，而后者没有被触发。

这是我的代码:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>

JS:

var options = {
    chart: {
        renderTo: 'container',
    },
    tooltip: { enabled: false },
    plotOptions: {
        series: {
            animation: false,
            allowPointSelect: true,
            point: {
                events: {
                    click: function (event) {
                        console.log('click fired');
                        this.remove();
                    }
                }
            }
        }
    },
    series: [{}]
};
options.series[0].data = [[1,1], [2,3],[4,2]];
options.series[0].draggableX = true;
options.series[0].draggableY = true;

new Highcharts.Chart(options);

http://jsfiddle.net/eu2d0t1L/2/显示这个。

有没有办法让这两个事件共存？

相关问题:当​​我发表评论时:

// options.series[0].draggableX = true;
// options.series[0].draggableY = true;

点删除有效但会产生错误:Uncaught TypeError: object is not a function in highcharts.js: 220。为什么？

Answer 1

好吧，我不是 highcharts.js 专家，但由于我没有得到任何答案，我修补了 draggable-points.js 以使其按我想要的方式工作。

补丁在//START PATCH和//END PATCH之间<​​/p>

    function drop(e) {
        if (dragPoint) {
            if (e) {
                var originalEvent = e.originalEvent || e,
                    pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
                    pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
                    draggableX = dragPoint.series.options.draggableX,
                    draggableY = dragPoint.series.options.draggableY,
                    deltaX = dragX - pageX,
                    deltaY = dragY - pageY,
                    series = dragPoint.series,
                    isScatter = series.type === 'bubble' || series.type === 'scatter',
                    newPlotX = isScatter ? dragPlotX - deltaX : dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    newX = dragX === undefined ? dragPoint.x : dragPoint.series.xAxis.translate(newPlotX, true),
                    newY = dragY === undefined ? dragPoint.y : dragPoint.series.yAxis.translate(newPlotY, true);

                // START patch

                if ( deltaX == 0 && deltaY == 0 ) { // it's actually a click; don't handle it as D&D
                    dragPoint = null;
                    return;
                }
                else {
                    e.preventDefault();  // prevents handling it as a click
                }

                // END patch

...