Fix IE native drag'n'drop issues
This commit is contained in:
parent
2993ae831f
commit
b7daccf9a9
3 changed files with 26 additions and 28 deletions
|
|
@ -93,12 +93,12 @@ function DefaultHandlers(mouseHandler) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.startSelect(pos);
|
this.startSelect(pos, true);
|
||||||
this.captureMouse(ev);
|
this.captureMouse(ev);
|
||||||
return ev.preventDefault();
|
return ev.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.startSelect = function(pos, setCaptureOnEvent) {
|
this.startSelect = function(pos, fromEvent) {
|
||||||
pos = pos || this.editor.renderer.screenToTextCoordinates(this.x, this.y);
|
pos = pos || this.editor.renderer.screenToTextCoordinates(this.x, this.y);
|
||||||
var editor = this.editor;
|
var editor = this.editor;
|
||||||
if (this.mousedownEvent.getShiftKey()) {
|
if (this.mousedownEvent.getShiftKey()) {
|
||||||
|
|
@ -108,14 +108,14 @@ function DefaultHandlers(mouseHandler) {
|
||||||
editor.moveCursorToPosition(pos);
|
editor.moveCursorToPosition(pos);
|
||||||
editor.selection.clearSelection();
|
editor.selection.clearSelection();
|
||||||
}
|
}
|
||||||
// IE sometimes get stuck in capture, I guess there some cases releaseCapture is not called, so disable for IE
|
if (editor.container.setCapture) {
|
||||||
if (editor.container.setCapture && !useragent.isIE) {
|
if (fromEvent) {
|
||||||
if (setCaptureOnEvent) {
|
editor.container.setCapture();
|
||||||
|
} else {
|
||||||
var self = this;
|
var self = this;
|
||||||
var onMouseMove = function() {
|
var onMouseMove = function() {
|
||||||
event.removeListener(editor.container, 'mousemove', onMouseMove);
|
event.removeListener(editor.container, 'mousemove', onMouseMove);
|
||||||
if (self.state && self.state.indexOf("select") == 0)
|
editor.container.setCapture();
|
||||||
editor.container.setCapture();
|
|
||||||
};
|
};
|
||||||
var onMouseUp = function() {
|
var onMouseUp = function() {
|
||||||
event.removeListener(editor.container, 'mouseup', onMouseUp);
|
event.removeListener(editor.container, 'mouseup', onMouseUp);
|
||||||
|
|
@ -123,8 +123,6 @@ function DefaultHandlers(mouseHandler) {
|
||||||
};
|
};
|
||||||
event.addListener(editor.container, 'mousemove', onMouseMove);
|
event.addListener(editor.container, 'mousemove', onMouseMove);
|
||||||
event.addListener(editor.container, 'mouseup', onMouseUp);
|
event.addListener(editor.container, 'mouseup', onMouseUp);
|
||||||
} else {
|
|
||||||
editor.container.setCapture();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
editor.setStyle("ace_selecting");
|
editor.setStyle("ace_selecting");
|
||||||
|
|
|
||||||
|
|
@ -40,8 +40,6 @@ var proxy = dom.createElement('img');
|
||||||
// Safari crashes without image data
|
// Safari crashes without image data
|
||||||
proxy.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
|
proxy.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
|
||||||
|
|
||||||
var DRAG_OFFSET = useragent.isIE ? 3 : 0; // pixels
|
|
||||||
|
|
||||||
function DragdropHandler(mouseHandler) {
|
function DragdropHandler(mouseHandler) {
|
||||||
|
|
||||||
var editor = mouseHandler.editor;
|
var editor = mouseHandler.editor;
|
||||||
|
|
@ -273,37 +271,41 @@ function DragdropHandler(mouseHandler) {
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
this.dragWait = function(e) {
|
this.dragWait = function() {
|
||||||
var editor = this.editor;
|
var editor = this.editor;
|
||||||
var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
|
var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
|
||||||
var interval = (new Date()).getTime() - this.mousedownEvent.time;
|
var interval = (new Date()).getTime() - this.mousedownEvent.time;
|
||||||
|
|
||||||
if (distance > DRAG_OFFSET)
|
if (distance > 0)
|
||||||
this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
|
this.startSelect(this.mousedownEvent.getDocumentPosition());
|
||||||
else if (interval > editor.getDragDelay())
|
else if (interval > editor.getDragDelay())
|
||||||
this.startDrag();
|
this.startDrag();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dragWaitEnd = function(e) {
|
this.dragWaitEnd = function() {
|
||||||
this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
|
this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
|
||||||
|
this.selectEnd();
|
||||||
};
|
};
|
||||||
|
|
||||||
this.startDrag = function(){
|
this.startDrag = function(){
|
||||||
var target = this.editor.renderer.getMouseEventTarget();
|
var target = this.editor.renderer.getMouseEventTarget();
|
||||||
this.setState("dragReady");
|
this.setState("dragReady");
|
||||||
this.editor.unsetStyle('ace_selecting');
|
|
||||||
this.editor.renderer.$cursorLayer.setBlinking(false);
|
this.editor.renderer.$cursorLayer.setBlinking(false);
|
||||||
target.draggable = true;
|
target.draggable = true;
|
||||||
// IE does not handle [draggable] attribute set after mousedown
|
if (useragent.isIE) {
|
||||||
if (target.dragDrop)
|
// IE does not handle [draggable] attribute set after mousedown
|
||||||
target.dragDrop();
|
event.addListener(target, "mousemove", forceDragIE);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dragReadyEnd = function(e) {
|
this.dragReadyEnd = function(e) {
|
||||||
var target = this.editor.renderer.getMouseEventTarget();
|
var target = this.editor.renderer.getMouseEventTarget();
|
||||||
target.draggable = false;
|
target.draggable = false;
|
||||||
|
if (useragent.isIE) {
|
||||||
|
event.removeListener(target, "mousemove", forceDragIE);
|
||||||
|
}
|
||||||
this.editor.renderer.$cursorLayer.setBlinking(!this.editor.getReadOnly());
|
this.editor.renderer.$cursorLayer.setBlinking(!this.editor.getReadOnly());
|
||||||
this.startSelect(this.mousedownEvent.getDocumentPosition());
|
this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
|
||||||
this.selectEnd();
|
this.selectEnd();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -330,7 +332,6 @@ function DragdropHandler(mouseHandler) {
|
||||||
}, 8);
|
}, 8);
|
||||||
}
|
}
|
||||||
this.captureMouse(e, "dragWait");
|
this.captureMouse(e, "dragWait");
|
||||||
editor.setStyle('ace_selecting');
|
|
||||||
} else {
|
} else {
|
||||||
this.startDrag();
|
this.startDrag();
|
||||||
this.captureMouse(e);
|
this.captureMouse(e);
|
||||||
|
|
@ -348,6 +349,11 @@ function DragdropHandler(mouseHandler) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function forceDragIE() {
|
||||||
|
event.removeListener(this, "mousemove", forceDragIE);
|
||||||
|
this.dragDrop();
|
||||||
|
}
|
||||||
|
|
||||||
function calcDistance(ax, ay, bx, by) {
|
function calcDistance(ax, ay, bx, by) {
|
||||||
return Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
|
return Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -117,9 +117,6 @@ var MouseHandler = function(editor) {
|
||||||
var onMouseMove = function(e) {
|
var onMouseMove = function(e) {
|
||||||
self.x = e.clientX;
|
self.x = e.clientX;
|
||||||
self.y = e.clientY;
|
self.y = e.clientY;
|
||||||
if (useragent.isIE) {
|
|
||||||
onCaptureInterval();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var onCaptureEnd = function(e) {
|
var onCaptureEnd = function(e) {
|
||||||
|
|
@ -144,10 +141,7 @@ var MouseHandler = function(editor) {
|
||||||
}
|
}
|
||||||
|
|
||||||
event.capture(this.editor.container, onMouseMove, onCaptureEnd);
|
event.capture(this.editor.container, onMouseMove, onCaptureEnd);
|
||||||
if (!useragent.isIE) {
|
var timerId = setInterval(onCaptureInterval, 20);
|
||||||
// this would cause problems on dragDrop() call in IE
|
|
||||||
var timerId = setInterval(onCaptureInterval, 20);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}).call(MouseHandler.prototype);
|
}).call(MouseHandler.prototype);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue