2010-09-16 23:32:55 +08:00
|
|
|
/*
|
|
|
|
* L.Draggable allows you to add dragging capabilities to any element. Supports mobile devices too.
|
|
|
|
*/
|
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
L.Draggable = L.Class.extend({
|
|
|
|
includes: L.Mixin.Events,
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
statics: {
|
2011-06-18 00:40:27 +08:00
|
|
|
START: L.Browser.touch ? 'touchstart' : 'mousedown',
|
|
|
|
END: L.Browser.touch ? 'touchend' : 'mouseup',
|
|
|
|
MOVE: L.Browser.touch ? 'touchmove' : 'mousemove',
|
2011-06-17 20:52:39 +08:00
|
|
|
TAP_TOLERANCE: 15
|
2010-09-16 21:05:55 +08:00
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
initialize: function(element, dragStartTarget) {
|
|
|
|
this._element = element;
|
|
|
|
this._dragStartTarget = dragStartTarget || element;
|
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
enable: function() {
|
|
|
|
if (this._enabled) { return; }
|
|
|
|
L.DomEvent.addListener(this._dragStartTarget, L.Draggable.START, this._onDown, this);
|
|
|
|
this._enabled = true;
|
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
disable: function() {
|
|
|
|
if (!this._enabled) { return; }
|
|
|
|
L.DomEvent.removeListener(this._dragStartTarget, L.Draggable.START, this._onDown);
|
|
|
|
this._enabled = false;
|
|
|
|
},
|
2011-03-22 01:09:43 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
_onDown: function(e) {
|
2010-09-21 21:10:31 +08:00
|
|
|
if (e.shiftKey || ((e.which != 1) && (e.button != 1) && !e.touches)) { return; }
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 23:32:55 +08:00
|
|
|
if (e.touches && e.touches.length > 1) { return; }
|
2011-06-17 18:50:50 +08:00
|
|
|
|
2011-09-09 17:52:28 +08:00
|
|
|
var first = (e.touches && e.touches.length == 1 ? e.touches[0] : e),
|
|
|
|
el = first.target;
|
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
L.DomEvent.preventDefault(e);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
|
|
|
if (L.Browser.touch && el.tagName.toLowerCase() === 'a') {
|
|
|
|
el.className += ' leaflet-active';
|
2011-06-17 18:50:50 +08:00
|
|
|
}
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-09-20 21:27:08 +08:00
|
|
|
if (this._moved) { return; }
|
2011-09-09 17:52:28 +08:00
|
|
|
|
|
|
|
if (!L.Browser.touch) {
|
|
|
|
L.DomUtil.disableTextSelection();
|
|
|
|
this._setMovingCursor();
|
|
|
|
}
|
|
|
|
|
2011-06-18 00:40:27 +08:00
|
|
|
this._startPos = this._newPos = L.DomUtil.getPosition(this._element);
|
2011-06-17 18:50:50 +08:00
|
|
|
this._startPoint = new L.Point(first.clientX, first.clientY);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
L.DomEvent.addListener(document, L.Draggable.MOVE, this._onMove, this);
|
|
|
|
L.DomEvent.addListener(document, L.Draggable.END, this._onUp, this);
|
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
_onMove: function(e) {
|
2010-09-16 23:32:55 +08:00
|
|
|
if (e.touches && e.touches.length > 1) { return; }
|
2011-06-17 18:50:50 +08:00
|
|
|
|
|
|
|
L.DomEvent.preventDefault(e);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
var first = (e.touches && e.touches.length == 1 ? e.touches[0] : e);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-21 20:48:31 +08:00
|
|
|
if (!this._moved) {
|
2010-09-16 21:05:55 +08:00
|
|
|
this.fire('dragstart');
|
2010-09-21 20:48:31 +08:00
|
|
|
this._moved = true;
|
2010-09-16 21:05:55 +08:00
|
|
|
}
|
2011-06-16 23:52:37 +08:00
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
var newPoint = new L.Point(first.clientX, first.clientY);
|
2011-06-16 23:52:37 +08:00
|
|
|
this._newPos = this._startPos.add(newPoint).subtract(this._startPoint);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-08-15 23:34:58 +08:00
|
|
|
L.Util.requestAnimFrame(this._updatePosition, this, true, this._dragStartTarget);
|
2010-09-16 21:05:55 +08:00
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-21 23:36:00 +08:00
|
|
|
_updatePosition: function() {
|
|
|
|
L.DomUtil.setPosition(this._element, this._newPos);
|
2011-07-20 15:18:59 +08:00
|
|
|
this.fire('drag');
|
2010-09-21 23:36:00 +08:00
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
_onUp: function(e) {
|
2011-06-17 20:52:39 +08:00
|
|
|
if (e.changedTouches) {
|
|
|
|
var first = e.changedTouches[0],
|
|
|
|
el = first.target,
|
2011-06-18 00:40:27 +08:00
|
|
|
dist = (this._newPos && this._newPos.distanceTo(this._startPos)) || 0;
|
2011-09-09 17:52:28 +08:00
|
|
|
|
|
|
|
if (el.tagName.toLowerCase() === 'a') {
|
|
|
|
el.className = el.className.replace(' leaflet-active', '');
|
|
|
|
}
|
|
|
|
|
2011-06-17 20:52:39 +08:00
|
|
|
if (dist < L.Draggable.TAP_TOLERANCE) {
|
|
|
|
this._simulateEvent('click', first);
|
|
|
|
}
|
2011-06-17 18:50:50 +08:00
|
|
|
}
|
2011-09-09 17:52:28 +08:00
|
|
|
|
|
|
|
if (!L.Browser.touch) {
|
|
|
|
L.DomUtil.enableTextSelection();
|
|
|
|
this._restoreCursor();
|
|
|
|
}
|
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
L.DomEvent.removeListener(document, L.Draggable.MOVE, this._onMove);
|
|
|
|
L.DomEvent.removeListener(document, L.Draggable.END, this._onUp);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-21 21:10:31 +08:00
|
|
|
if (this._moved) {
|
|
|
|
this.fire('dragend');
|
2011-09-20 21:27:08 +08:00
|
|
|
this._moved = false;
|
2010-09-21 21:10:31 +08:00
|
|
|
}
|
2011-06-17 18:50:50 +08:00
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
_setMovingCursor: function() {
|
|
|
|
this._bodyCursor = document.body.style.cursor;
|
|
|
|
document.body.style.cursor = 'move';
|
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2010-09-16 21:05:55 +08:00
|
|
|
_restoreCursor: function() {
|
|
|
|
document.body.style.cursor = this._bodyCursor;
|
2011-06-16 23:52:37 +08:00
|
|
|
},
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
_simulateEvent: function(type, e) {
|
2011-09-09 17:52:28 +08:00
|
|
|
var simulatedEvent = document.createEvent('MouseEvents');
|
|
|
|
|
2011-06-17 18:50:50 +08:00
|
|
|
simulatedEvent.initMouseEvent(
|
2011-09-09 17:52:28 +08:00
|
|
|
type, true, true, window, 1,
|
|
|
|
e.screenX, e.screenY,
|
|
|
|
e.clientX, e.clientY,
|
2011-06-17 18:50:50 +08:00
|
|
|
false, false, false, false, 0, null);
|
2011-09-09 17:52:28 +08:00
|
|
|
|
2011-06-16 23:52:37 +08:00
|
|
|
e.target.dispatchEvent(simulatedEvent);
|
2010-09-16 21:05:55 +08:00
|
|
|
}
|
2011-05-31 02:30:18 +08:00
|
|
|
});
|