/* * L.Draggable allows you to add dragging capabilities to any element. Supports mobile devices too. */ L.Draggable = L.Class.extend({ includes: L.Mixin.Events, statics: { START: L.Browser.mobileWebkit ? 'touchstart' : 'mousedown', END: L.Browser.mobileWebkit ? 'touchend' : 'mouseup', MOVE: L.Browser.mobileWebkit ? 'touchmove' : 'mousemove' }, initialize: function(element, dragStartTarget) { this._element = element; this._dragStartTarget = dragStartTarget || element; }, enable: function() { if (this._enabled) { return; } L.DomEvent.addListener(this._dragStartTarget, L.Draggable.START, this._onDown, this); this._enabled = true; }, disable: function() { if (!this._enabled) { return; } L.DomEvent.removeListener(this._dragStartTarget, L.Draggable.START, this._onDown); this._enabled = false; }, _onDown: function(e) { if (e.shiftKey || ((e.which != 1) && (e.button != 1) && !e.touches)) { return; } if (e.touches && e.touches.length > 1) { return; } var first = (e.touches && e.touches.length == 1 ? e.touches[0] : e); L.DomEvent.preventDefault(e); if (L.Browser.mobileWebkit) { first.target.className += ' leaflet-active'; } this._moved = false; L.DomUtil.disableTextSelection(); this._setMovingCursor(); this._startPos = L.DomUtil.getPosition(this._element); this._startPoint = new L.Point(first.clientX, first.clientY); L.DomEvent.addListener(document, L.Draggable.MOVE, this._onMove, this); L.DomEvent.addListener(document, L.Draggable.END, this._onUp, this); }, _onMove: function(e) { if (e.touches && e.touches.length > 1) { return; } L.DomEvent.preventDefault(e); var first = (e.touches && e.touches.length == 1 ? e.touches[0] : e); if (!this._moved) { this.fire('dragstart'); this._moved = true; if (L.Browser.mobileWebkit) { this._removeActiveClass(first.target); } } var newPoint = new L.Point(first.clientX, first.clientY); this._newPos = this._startPos.add(newPoint).subtract(this._startPoint); L.Util.requestAnimFrame(this._updatePosition, this, true); this.fire('drag'); }, _updatePosition: function() { L.DomUtil.setPosition(this._element, this._newPos); }, _onUp: function(e) { if (!this._moved && e.changedTouches) { var first = e.changedTouches[0]; this._removeActiveClass(first.target); this._simulateEvent('click', first); } L.DomUtil.enableTextSelection(); this._restoreCursor(); L.DomEvent.removeListener(document, L.Draggable.MOVE, this._onMove); L.DomEvent.removeListener(document, L.Draggable.END, this._onUp); if (this._moved) { this.fire('dragend'); } }, _removeActiveClass: function(el) { el.className = el.className.replace(' leaflet-active', ''); }, _setMovingCursor: function() { this._bodyCursor = document.body.style.cursor; document.body.style.cursor = 'move'; }, _restoreCursor: function() { document.body.style.cursor = this._bodyCursor; }, _simulateEvent: function(type, e) { var simulatedEvent = document.createEvent('MouseEvent'); simulatedEvent.initMouseEvent( type, true, true, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null); e.target.dispatchEvent(simulatedEvent); } });