bubble-dragndrop.js

/**
 * Bubble drag and drop v0.0.1 (2013-02-22)
 *
 * (c) 2012-2013 Black Label
 *
 * License: Creative Commons Attribution (CC)
 */
 
(function(HC){
/*jshint expr:true, boss:true */

        var bubDrag = HC.SVGElement.prototype.dragAndDrop = {
            //start
            start: function (e, po) {

                var p = po.graphic,
                    ch = po.series.chart,
                    epageX,
                    epageY;
                
                $(document).bind({
                    'mousemove.line': function (e2) {
                        bubDrag.step(e2, p, po)
                    },
                        'mouseup.line': function (e2) {
                        bubDrag.stop(e2, po)
                    },
                        'touchmove.line': function (e2) {
                        bubDrag.step(e2, p, po)
                    },
                        'touchend.line': function (e2) {
                        bubDrag.stop(e2, po)
                    }
                });
                
                if (e.changedTouches) {
                    epageX = e.changedTouches[0].pageX;
                    epageY = e.changedTouches[0].pageY;
                } else {
                    epageX = e.pageX;
                    epageY = e.pageY;
                    
                }
                
                p.clickX = epageX - p.translateX;
                p.clickY = epageY - p.translateY;
               
                p.offsetXdrag = epageX - (ch.container.offsetLeft + ch.plotLeft + po.plotX);
                p.offsetYdrag = epageY - (ch.container.offsetTop + ch.plotTop + po.plotY);
                
                
            },
            //step
            step: function (e, p, po) {
                e.preventDefault();


                var ch = po.series.chart,
                    pageX = e.pageX,
                    pageY = e.pageY,
                    offsetX, offsetY, x, y, tmpX, tmpY;


                if (e.originalEvent.changedTouches) {
                    pageX = e.originalEvent.changedTouches[0].pageX;
                    pageY = e.originalEvent.changedTouches[0].pageY;
                }


                offsetX = pageX - ch.container.offsetLeft; 
                offsetY = pageY - ch.container.offsetTop;

                // move element
                p.translate(pageX - p.clickX, pageY - p.clickY);
                
                po.update({
                    x: ch.xAxis[0].toValue(offsetX - p.offsetXdrag),
                    y: ch.yAxis[0].toValue(offsetY - p.offsetYdrag)
                }, false, false);

                if (ch.tooltip.options.enabled) ch.tooltip.refresh(po);
                
                if(offsetX < ch.plotLeft || offsetY < ch.plotTop || offsetY > (ch.plotHeight + ch.plotTop) || offsetX > (ch.plotWidth + ch.plotLeft)) this.stop(e,po);
            },
            //stop
            stop: function (el, po) {
                po.series.chart.redraw(false);
                $(document).unbind('.line');
            }
        };

        HC.wrap(HC.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {

            proceed.apply(this, Array.prototype.slice.call(arguments, 1));

            var points = this.data;

            $.each(points, function (i,point) {
                point.graphic.translate(0, 0)
                    .css({
                    'cursor': 'pointer'
                })
                    .on('mousedown', function (e) {

                    point.graphic.dragAndDrop.start(e, point);
                })
                    .on('touchstart', function (e) {

                    point.graphic.dragAndDrop.start(e, point);
                });
            });
        });
})(Highcharts);