diff --git a/modules/behavior/drag.js b/modules/behavior/drag.js index e02cf214f..760b878ca 100644 --- a/modules/behavior/drag.js +++ b/modules/behavior/drag.js @@ -19,9 +19,8 @@ import { than `x`, `y`, `dx`, and `dy` properties. * The `end` event is not dispatched if no movement occurs. * An `off` function is available that unbinds the drag's internal event handlers. - * Delegation is supported via the `delegate` function. - */ + export function behaviorDrag() { var event = d3.dispatch('start', 'move', 'end'), origin = null, @@ -30,11 +29,23 @@ export function behaviorDrag() { event_, target, surface; + var d3_event_userSelectProperty = utilPrefixCSSProperty('UserSelect'), + d3_event_userSelectSuppress = function() { + var selection = d3.selection(), + select = selection.style(d3_event_userSelectProperty); + selection.style(d3_event_userSelectProperty, 'none'); + return function() { + selection.style(d3_event_userSelectProperty, select); + }; + }; + + function d3_eventCancel() { d3.event.stopPropagation(); d3.event.preventDefault(); } + function eventOf(thiz, argumentz) { return function(e1) { e1.target = drag; @@ -42,23 +53,6 @@ export function behaviorDrag() { }; } - var d3_event_userSelectProperty = utilPrefixCSSProperty('UserSelect'), - d3_event_userSelectSuppress = d3_event_userSelectProperty ? - function () { - var selection = d3.selection(), - select = selection.style(d3_event_userSelectProperty); - selection.style(d3_event_userSelectProperty, 'none'); - return function () { - selection.style(d3_event_userSelectProperty, select); - }; - } : - function (type) { - var w = d3.select(window).on('selectstart.' + type, d3_eventCancel); - return function () { - w.on('selectstart.' + type, null); - }; - }; - function dragstart() { target = this; @@ -71,7 +65,7 @@ export function behaviorDrag() { started = false, selectEnable = d3_event_userSelectSuppress(touchId !== null ? 'drag-' + touchId : 'drag'); - var w = d3.select(window) + d3.select(window) .on(touchId !== null ? 'touchmove.drag-' + touchId : 'mousemove.drag', dragmove) .on(touchId !== null ? 'touchend.drag-' + touchId : 'mouseup.drag', dragend, true); @@ -82,7 +76,9 @@ export function behaviorDrag() { offset = [0, 0]; } - if (touchId === null) d3.event.stopPropagation(); + if (touchId === null) { + d3.event.stopPropagation(); + } function point() { @@ -103,9 +99,7 @@ export function behaviorDrag() { if (!started) { started = true; - event_({ - type: 'start' - }); + event_({ type: 'start' }); } origin_ = p; @@ -121,23 +115,27 @@ export function behaviorDrag() { function dragend() { if (started) { - event_({ - type: 'end' - }); + event_({ type: 'end' }); d3_eventCancel(); - if (d3.event.target === eventTarget) w.on('click.drag', click, true); + if (d3.event.target === eventTarget) { + d3.select(window) + .on('click.drag', click, true); + } } - w.on(touchId !== null ? 'touchmove.drag-' + touchId : 'mousemove.drag', null) + d3.select(window) + .on(touchId !== null ? 'touchmove.drag-' + touchId : 'mousemove.drag', null) .on(touchId !== null ? 'touchend.drag-' + touchId : 'mouseup.drag', null); + selectEnable(); } function click() { d3_eventCancel(); - w.on('click.drag', null); + d3.select(window) + .on('click.drag', null); } } @@ -159,18 +157,20 @@ export function behaviorDrag() { }; } - selection.on('mousedown.drag' + selector, delegate) + selection + .on('mousedown.drag' + selector, delegate) .on('touchstart.drag' + selector, delegate); } drag.off = function(selection) { - selection.on('mousedown.drag' + selector, null) + selection + .on('mousedown.drag' + selector, null) .on('touchstart.drag' + selector, null); }; - drag.delegate = function(_) { + drag.selector = function(_) { if (!arguments.length) return selector; selector = _; return drag; diff --git a/modules/modes/drag_node.js b/modules/modes/drag_node.js index f8b887653..8d682b99c 100644 --- a/modules/modes/drag_node.js +++ b/modules/modes/drag_node.js @@ -236,7 +236,7 @@ export function modeDragNode(context) { var behavior = behaviorDrag() - .delegate('g.node, g.point, g.midpoint') + .selector('g.node, g.point, g.midpoint') .surface(d3.select('#map').node()) .origin(origin) .on('start', start)