selecton/src/js/drag.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 {_getInputSearch}    from './elementHandler';
import {_getInputItems}     from './elementHandler';

export default function (w, xDragOffset, yDragOffset){
    var search         = _getInputSearch(w);
    var searchNode     = search.node();
    var draggedItem    = this.parentNode;
    var eventY         = d3event.sourceEvent.pageY;
    var eventX         = d3event.sourceEvent.pageX;
    var clone          = d3select('div.input-item-clone').node();
    var cloneTop       = clone.getBoundingClientRect().top;
    var cloneWidth     = clone.clientWidth;
    var inputItems     = _getInputItems(w);

    var itemsBefore = inputItems
        .filter(function(){

            var h = this.clientHeight;
            var t = this.getBoundingClientRect().top;

            return cloneTop > t - h / 2 && cloneTop < t + h / 2 && eventX < this.getBoundingClientRect().right - cloneWidth / 2;
        }).nodes()[0];

    var itemsAfter = inputItems
        .filter(function(){

            var h = this.clientHeight;
            var t = this.getBoundingClientRect().top;

            return cloneTop > t - h / 2 && cloneTop < t + h / 2 && eventX > this.getBoundingClientRect().left + cloneWidth / 2;
        }).nodes()[0];

    if(itemsBefore){
        searchNode.insertBefore(draggedItem, itemsBefore);
    }else if(itemsAfter && itemsBefore === undefined){
        searchNode.append(draggedItem);
    }

    d3select('div.input-item-clone')
        .style('left', eventX - xDragOffset + 'px')
        .style('top', eventY - yDragOffset + 'px');
}