| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>drag_test.html</title> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.action'); |
| goog.require('bot.dom'); |
| goog.require('goog.events'); |
| goog.require('goog.fx.DragDropGroup'); |
| goog.require('goog.math.Coordinate'); |
| </script> |
| |
| <style type="text/css"> |
| div#testDiv,div#testDiv2 { |
| width: 40px; |
| height: 20px; |
| top: 25px; |
| left: 300px; |
| border: 3px solid #AF0078; |
| position: absolute; |
| } |
| div#testDiv2 { |
| top: 10px; |
| left: 200px; |
| width: 200px; |
| height: 100px; |
| z-index: -1; |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| QUnit.test('closure fx drag and drop', function(assert) { |
| var testDiv = document.getElementById('testDiv'); |
| var testDiv2 = document.getElementById('testDiv2'); |
| var div1 = new goog.fx.DragDropGroup(); |
| var div2 = new goog.fx.DragDropGroup(); |
| div1.addItem(testDiv, 'Drag me'); |
| div2.addItem(testDiv2, 'Destination'); |
| div1.addTarget(div2); |
| div1.init(); |
| div2.init(); |
| |
| goog.events.listen(div2, 'drop', function(event) { |
| var dragSrc = event.dragSourceItem; |
| var elem = event.dragSourceItem.element; |
| var rect = bot.dom.getClientRect(elem); |
| elem.style.left = rect.left + |
| (event.clientX - dragSrc.startPosition_.x) + 'px'; |
| elem.style.top = rect.top + (event.clientY - dragSrc.startPosition_.y) + |
| 'px'; |
| }); |
| |
| var target = document.getElementById('testDiv'); |
| var rectOld = bot.dom.getClientRect(target); |
| var coords = new goog.math.Coordinate(15, 5); |
| var dx = -75; |
| var dy = 35; |
| bot.action.drag(target, dx, dy, 2, coords); |
| |
| var rectNew = bot.dom.getClientRect(target); |
| assert.strictEqual(rectNew.left, rectOld.left + dx, 'Wrong x coordinate'); |
| assert.strictEqual(rectNew.top, rectOld.top + dy, 'Wrong y coordinate'); |
| |
| div1.dispose(); |
| div2.dispose(); |
| }); |
| |
| function elementThatMovesDuringDrag(assert, action) { |
| if ((action == bot.action.swipe && !bot.events.SUPPORTS_TOUCH_EVENTS) || |
| (goog.userAgent.IE && !bot.userAgent.isProductVersion(7))) { |
| assert.ok(true, 'Skipping: action not supported or IE6'); |
| return; |
| } |
| var DragDropDiv = function(element) { |
| this.element_ = element; |
| this.dragging_ = false; |
| this.x_ = 0; |
| this.y_ = 0; |
| if (action == bot.action.drag) { |
| goog.events.listen(this.element_, goog.events.EventType.MOUSEDOWN, |
| this.startMove, false, this); |
| goog.events.listen(this.element_, goog.events.EventType.MOUSEMOVE, |
| this.move, false, this); |
| goog.events.listen(this.element_, goog.events.EventType.MOUSEUP, |
| this.endMove, false, this); |
| } else { |
| goog.events.listen(this.element_, goog.events.EventType.TOUCHSTART, |
| this.startMove, false, this); |
| goog.events.listen(this.element_, goog.events.EventType.TOUCHMOVE, |
| this.move, false, this); |
| goog.events.listen(this.element_, goog.events.EventType.TOUCHEND, |
| this.endMove, false, this); |
| } |
| }; |
| DragDropDiv.prototype.startMove = function(event) { |
| this.dragging_ = true; |
| if (action == bot.action.drag) { |
| this.x_ = event.clientX; |
| this.y_ = event.clientY; |
| } else { |
| var e = event.getBrowserEvent(); |
| if (e.touches) { |
| this.x_ = e.touches[0].clientX; |
| this.y_ = e.touches[0].clientY; |
| } |
| } |
| }; |
| DragDropDiv.prototype.move = function(event) { |
| if (this.dragging_) { |
| var dx, dy; |
| if (action == bot.action.drag) { |
| dx = event.clientX - this.x_; |
| dy = event.clientY - this.y_; |
| this.x_ = event.clientX; |
| this.y_ = event.clientY; |
| } else { |
| var e = event.getBrowserEvent(); |
| dx = e.touches[0].clientX - this.x_; |
| dy = e.touches[0].clientY - this.y_; |
| this.x_ = e.touches[0].clientX; |
| this.y_ = e.touches[0].clientY; |
| event.preventDefault(); |
| } |
| var elementStyle = this.element_.style; |
| elementStyle.left = parseInt(elementStyle.left) + dx + 'px'; |
| elementStyle.top = parseInt(elementStyle.top) + dy + 'px'; |
| } |
| }; |
| DragDropDiv.prototype.endMove = function(event) { |
| this.dragging_ = false; |
| if (action == bot.action.drag) { |
| this.x_ = event.clientX; |
| this.y_ = event.clientY; |
| } else { |
| var e = event.getBrowserEvent(); |
| if (e.changedTouches) { |
| this.x_ = e.changedTouches[0].clientX; |
| this.y_ = e.changedTouches[0].clientY; |
| } |
| } |
| }; |
| |
| var target = document.getElementById('dragDiv'); |
| var dragDiv = new DragDropDiv(target); |
| |
| var initRect = bot.dom.getClientRect(target); |
| var coords = new goog.math.Coordinate(5, 5); |
| var dx = 25; |
| var dy = -30; |
| action(target, dx, dy, 1, coords); |
| |
| var finalRect = bot.dom.getClientRect(target); |
| assert.strictEqual(finalRect.left, initRect.left + dx); |
| assert.strictEqual(finalRect.top, initRect.top + dy); |
| } |
| |
| QUnit.test('drag element that moves during drag', function(assert) { |
| elementThatMovesDuringDrag(assert, bot.action.drag); |
| }); |
| |
| QUnit.test('swipe element that moves during drag', function(assert) { |
| elementThatMovesDuringDrag(assert, bot.action.swipe); |
| }); |
| |
| QUnit.test('element that moves during mouse move', function(assert) { |
| if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) { |
| assert.ok(true, 'Skipping: IE6 does not render this test page properly'); |
| return; |
| } |
| var CursorDiv = function(element) { |
| this.element_ = element; |
| var currentRect = bot.dom.getClientRect(element); |
| this.x_ = currentRect.left + 25; |
| this.y_ = currentRect.top + 25; |
| goog.events.listen(this.element_, goog.events.EventType.MOUSEMOVE, |
| this.move, false, this); |
| }; |
| CursorDiv.prototype.move = function(event) { |
| var dx = event.clientX - this.x_; |
| var dy = event.clientY - this.y_; |
| this.x_ = event.clientX; |
| this.y_ = event.clientY; |
| |
| var elementStyle = this.element_.style; |
| elementStyle.left = parseInt(elementStyle.left) + dx + 'px'; |
| elementStyle.top = parseInt(elementStyle.top) + dy + 'px'; |
| }; |
| |
| var target = document.getElementById('cursorDiv'); |
| var cursorDiv = new CursorDiv(target); |
| |
| var initRect = bot.dom.getClientRect(target); |
| var coords = new goog.math.Coordinate(10, 10); |
| var dx = 100; |
| var dy = 0; |
| bot.action.drag(target, dx, dy, 1, coords); |
| |
| var finalRect = bot.dom.getClientRect(target); |
| assert.strictEqual(finalRect.left, initRect.left + dx - 15); |
| assert.strictEqual(finalRect.top, initRect.top + dy - 15); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| <div id="testDiv" style="background-color: red;" >Drag</div> |
| <div id="testDiv2">Drop inside me.</div> |
| <div id="dragDiv" style="position:fixed; top:50px; left:50px; |
| background-color:yellow; -ms-touch-action:none"> Drag Me </div> |
| <div id="cursorDiv" style="position:fixed; top:100px; left:50px; width:50px; |
| height:50px; background-color:blue; -ms-touch-action:none"> Cursor </div> |
| </body> |
| </html> |
