swapping-event-handlers-between-dom-elements-d3

by dekkard

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.js"></script>
<input type="range" id="slider1" />
<div>Slider 1: <span id="slider1_msg"></span></div>

<input type="range" id="slider2" />
<div>Slider 2: <span id="slider2_msg"></span></div>

JavaScript

var Drag = (function () {
    var _opts,
    _drag = d3.behavior.drag();
    var eventList = ['drag', 'dragstart', 'dragend'];

    function attachEvents(opts) {
        eventList.forEach(function (e, i) {
            if (opts[e]) {
                _drag.on(e, this[e]);
            } else {
                _drag.on(e, null);
            }
        }.bind(this));
    }

    function detachEvents() {
        eventList.forEach(function (e, i) {
            if (_opts[e]) {
                _drag.on(e, null);
            }
        }.bind(this));
    }

    function Drag(opts) {
        _opts = opts;
        attachEvents.call(this, opts);
        _opts.element = opts.element.call(_drag);
        _opts.element.attr('isDraggable', true);
    }
    Drag.prototype.drag = function (args) {
        _opts.drag(args);
    };
    Drag.prototype.dragstart = function (args) {
        _opts.dragstart(args);
    };

    Drag.prototype.dragend = function (args) {
        _opts.dragend(args);
    };
    Drag.prototype.element = function (el) {
        console.log("Drag.prototype.element: %o", el);
        
        if (el) {
            //detachEvents.call(this);
            //_opts.element.call(_drag);
            
            // disable all drag events on this element
            _opts.element.on('.drag', null);
            
            //console.log("* _opts.element: %o", _opts.element); 
            
            //console.log("_drag.on('drag'): %o", _drag.on('drag')); 
            //console.log("_drag.on('dragstart'): %o", _drag.on('dragstart'));
            //console.log("_drag.on('dragend'): %o", _drag.on('dragend'));
            
            // set new element and enable drag behavior
            _opts.element = el;
            //attachEvents.call(this, _opts);
            _opts.element.call(_drag);
            
            //console.log("** _opts.element: %o", _opts.element);
        }
    };
    Drag.prototype.config = function (opts) {
        _opts = opts;
       ...