selecton/src/js/dragstart.js

Selecton.js combines a searchbar and a dropdown menu with nested child lists.

import {select as d3select}   from 'd3-selection';
import {event  as d3event}    from 'd3-selection';
import {_getInputSearchField} from './elementHandler';

export default function (w){
    var inputSearch = _getInputSearchField(w);
    var inputItem   = d3select(this.parentNode).classed('drag-active', true).node();
    var clone       = inputItem.cloneNode(true);
    var eventX      = d3event.sourceEvent.pageX;
    var eventY      = d3event.sourceEvent.pageY;
    var rect        = this.getBoundingClientRect();
    var xDragOffset = eventX - rect.left;
    var yDragOffset = eventY - rect.top - (window.scrollY || window.pageYOffset);

    d3select(clone)
        .attr('class', 'input-item-clone')
        .style('transform-origin', xDragOffset + 'px ' + yDragOffset + 'px')
        .style('left', eventX - xDragOffset + 'px')
        .style('top',  eventY - yDragOffset + 'px');

    document.body.appendChild(clone);

    inputSearch.remove();

    return {
        x : xDragOffset,
        y : yDragOffset
    };
}