Fix IE native drag'n'drop issues

This commit is contained in:
DanyaPostfactum 2013-09-12 01:44:55 +10:00
commit b7daccf9a9
3 changed files with 26 additions and 28 deletions

View file

@ -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");

View file

@ -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));
} }

View file

@ -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);