0% found this document useful (0 votes)
149 views7 pages

HTML 5 Drag and Drop Simulator

The document defines an enum called Position that represents different positions on a grid (e.g. Top_Left, Top, Center, etc.). It contains methods getX() and getY() that return the x and y coordinate for a given Position and size. It also includes JavaScript code to simulate HTML5 drag and drop events like mousedown, dragstart, dragenter etc. between web elements in the browser. The Java code provides methods to call the JavaScript functions to simulate individual events or full drag and drop between two web elements using their coordinates.

Uploaded by

Pradeep Konda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
149 views7 pages

HTML 5 Drag and Drop Simulator

The document defines an enum called Position that represents different positions on a grid (e.g. Top_Left, Top, Center, etc.). It contains methods getX() and getY() that return the x and y coordinate for a given Position and size. It also includes JavaScript code to simulate HTML5 drag and drop events like mousedown, dragstart, dragenter etc. between web elements in the browser. The Java code provides methods to call the JavaScript functions to simulate individual events or full drag and drop between two web elements using their coordinates.

Uploaded by

Pradeep Konda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

public enum Position {

Top_Left, Top, Top_Right, Left, Center, Right, Bottom_Left, Bott


om, Bottom_Right;
static int getX(Position pos, int width) {
if (Top_Left.equals(pos) || Left.equals(pos) || Bottom_L
eft.equals(pos)) {
return 1;
} else if (Top.equals(pos) || Center.equals(pos) || Bott
om.equals(pos)) {
return width / 2;
} else if (Top_Right.equals(pos) || Right.equals(pos) ||
Bottom_Right.equals(pos)) {
return width - 1;
} else {
return 0;
}
}
static int getY(Position pos, int height) {
if (Top_Left.equals(pos) || Top.equals(pos) || Top_Right
.equals(pos)) {
return 1;
} else if (Left.equals(pos) || Center.equals(pos) || Rig
ht.equals(pos)) {
return height / 2;
} else if (Bottom_Left.equals(pos) || Bottom.equals(pos)
|| Bottom_Right.equals(pos)) {
return height - 1;
} else {
return 0;
}
}
}
/**
* Controls all the event simulation required for drag and drop
*/
private static final String javaScriptEventSimulator= "" +
/* Creates a drag event */
"function createDragEvent(eventName, options)\r\n" +
"{\r\n" +
"
var event = document.createEvent(\"DragEvent\");
\r\n" +
"

var screenX = window.screenX + options.clientX;\

"

var screenY = window.screenY + options.clientY;\

"
"
"
"

var clientX = options.clientX;\r\n" +


var clientY = options.clientY;\r\n" +
var dataTransfer = {\r\n" +
data: options.dragData == null ? {} : op

r\n" +
r\n" +

tions.dragData,\r\n" +
"

setData: function(eventName, val){\r\n"

+
"

if (typeof val === 'string') {\r

"

this.data[eventName] = v

\n" +
al;\r\n" +
"

}\r\n" +

"
"
"

},\r\n" +
getData: function(eventName){\r\n" +
return this.data[eventName];\r\n

"
"
"
"
"

},\r\n" +
clearData: function(){\r\n" +
return this.data = {};\r\n" +
},\r\n" +
setDragImage: function(dragElement, x, y

"
"
"

};\r\n" +
var eventInitialized=false;\r\n"+
if (event != null && event.initDragEvent) {\r\n"

" +

) {}\r\n" +

+
"
try {\r\n"+
"
event.initDragEvent(eventName, t
rue, true, window, 0, screenX, screenY, clientX, clientY, false, false, false, f
alse, 0, null, dataTransfer);\r\n" +
"
event.initialized=true;\r\n"+
"
} catch(err) {\r\n"+
"
// no-op\r\n"+
"
}\r\n"+
"
}\r\n"+
"
if (!eventInitialized) {\r\n"+
"
event = document.createEvent(\"CustomEve
nt\");\r\n" +
"
event.initCustomEvent(eventName, true, t
rue, null);\r\n" +
"
event.view = window;\r\n" +
"
event.detail = 0;\r\n" +
"
event.screenX = screenX;\r\n" +
"
event.screenY = screenY;\r\n" +
"
event.clientX = clientX;\r\n" +
"
event.clientY = clientY;\r\n" +
"
event.ctrlKey = false;\r\n" +
"
event.altKey = false;\r\n" +
"
event.shiftKey = false;\r\n" +
"
event.metaKey = false;\r\n" +
"
event.button = 0;\r\n" +
"
event.relatedTarget = null;\r\n" +
"
event.dataTransfer = dataTransfer;\r\n"
+
"
}\r\n" +
"
return event;\r\n" +
"}\r\n" +
/* Creates a mouse event */
"function createMouseEvent(eventName, options)\r\n" +
"{\r\n" +
"
var event = document.createEvent(\"MouseEvent\")
;\r\n" +
"

var screenX = window.screenX + options.clientX;\

"

var screenY = window.screenY + options.clientY;\

"
"
"

var clientX = options.clientX;\r\n" +


var clientY = options.clientY;\r\n" +
if (event != null && event.initMouseEvent) {\r\n

"

event.initMouseEvent(eventName, true, tr

r\n" +
r\n" +

" +

ue, window, 0, screenX, screenY, clientX, clientY, false, false, false, false, 0
, null);\r\n" +
"
} else {\r\n" +
"
event = document.createEvent(\"CustomEve
nt\");\r\n" +
"
event.initCustomEvent(eventName, true, t
rue, null);\r\n" +
"
event.view = window;\r\n" +
"
event.detail = 0;\r\n" +
"
event.screenX = screenX;\r\n" +
"
event.screenY = screenY;\r\n" +
"
event.clientX = clientX;\r\n" +
"
event.clientY = clientY;\r\n" +
"
event.ctrlKey = false;\r\n" +
"
event.altKey = false;\r\n" +
"
event.shiftKey = false;\r\n" +
"
event.metaKey = false;\r\n" +
"
event.button = 0;\r\n" +
"
event.relatedTarget = null;\r\n" +
"
}\r\n" +
"
return event;\r\n" +
"}\r\n" +
/* Runs the events */
"function dispatchEvent(webElement, eventName, event)\r\
n" +
"{\r\n" +
"
if (webElement.dispatchEvent) {\r\n" +
"
webElement.dispatchEvent(event);\r\n" +
"
} else if (webElement.fireEvent) {\r\n" +
"
webElement.fireEvent(\"on\"+eventName, e
vent);\r\n" +
"
}\r\n" +
"}\r\n" +
/* Simulates an individual event */
"function simulateEventCall(element, eventName, dragStar
tEvent, options) {\r\n" +
"
var event = null;\r\n" +
"
if (eventName.indexOf(\"mouse\") > -1) {\r\n" +
"
event = createMouseEvent(eventName, opti
ons);\r\n" +
"
} else {\r\n" +
"
event = createDragEvent(eventName, optio
ns);\r\n" +
"
}\r\n" +
"
if (dragStartEvent != null) {\r\n" +
"
event.dataTransfer = dragStartEvent.data
Transfer;\r\n" +
"
}\r\n" +
"
dispatchEvent(element, eventName, event);\r\n" +
"
return event;\r\n" +
"}\r\n";
/**
* Simulates an individual events
*/
private static final String simulateEvent = javaScriptEventSimulator +
"function simulateEvent(element, eventName, clientX, cli
entY, dragData) {\r\n" +

"
return simulateEventCall(element, eventName, nul
l, {clientX: clientX, clientY: clientY, dragData: dragData});\r\n" +
"}\r\n" +
"var event = simulateEvent(arguments[0], arguments[1], a
rguments[2], arguments[3], arguments[4]);\r\n" +
"if (event.dataTransfer != null) {\r\n" +
"
return event.dataTransfer.data;\r\n" +
"}\r\n";
/**
* Simulates drag and drop
*/
private static final String simulateHTML5DragAndDrop = javaScriptEventSi
mulator +
"function simulateHTML5DragAndDrop(dragFrom, dragTo, dra
gFromX, dragFromY, dragToX, dragToY) {\r\n" +
"
var mouseDownEvent = simulateEventCall(dragFrom,
\"mousedown\", null, {clientX: dragFromX, clientY: dragFromY});\r\n" +
"
var dragStartEvent = simulateEventCall(dragFrom,
\"dragstart\", null, {clientX: dragFromX, clientY: dragFromY});\r\n" +
"
var dragEnterEvent = simulateEventCall(dragTo,
\"dragenter\", dragStartEvent, {clientX: dragToX, clientY: dragToY});\r\n" +
"
var dragOverEvent = simulateEventCall(dragTo,
\"dragover\", dragStartEvent, {clientX: dragToX, clientY: dragToY});\r\n" +
"
var dropEvent
= simulateEventCall(dragTo,
\"drop\",
dragStartEvent, {clientX: dragToX, clientY: dragToY});\r\n" +
"
var dragEndEvent = simulateEventCall(dragFrom,
\"dragend\", dragStartEvent, {clientX: dragToX, clientY: dragToY});\r\n" +
"}\r\n" +
"simulateHTML5DragAndDrop(arguments[0], arguments[1], ar
guments[2], arguments[3], arguments[4], arguments[5]);\r\n";
/**
* Calls a drag event
*
* @param driver
*
The WebDriver to execute on
* @param dragFrom
*
The WebElement to simulate on
* @param eventName
*
The event name to call
* @param clientX
*
The mouse click X position on the screen
* @param clientY
*
The mouse click Y position on the screen
* @param data
*
The data transfer data
* @return The updated data transfer data
*/
public static Object html5_simulateEvent(WebDriver driver, WebElement dr
agFrom, String eventName, int clientX, int clientY, Object data) {
return ((org.openqa.selenium.JavascriptExecutor)driver).executeS
cript(simulateEvent, dragFrom, eventName, clientX, clientY, data);
}
/**
* Calls a drag event
*

* @param driver
*
The WebDriver to execute on
* @param dragFrom
*
The WebElement to simulate on
* @param eventName
*
The event name to call
* @param mousePosition
*
The mouse click area in the element
* @param data
*
The data transfer data
* @return The updated data transfer data
*/
public static Object html5_simulateEvent(WebDriver driver, WebElement dr
agFrom, String eventName, Position mousePosition, Object data) {
Point fromLocation= dragFrom.getLocation();
Dimension fromSize= dragFrom.getSize();
// Get Client X and Client Y locations
int clientX= fromLocation.getX() + (fromSize == null ? 0 : Posit
ion.getX(mousePosition, fromSize.getWidth()));
int clientY= fromLocation.getY() + (fromSize == null ? 0 : Posit
ion.getY(mousePosition, fromSize.getHeight()));
return html5_simulateEvent(driver, dragFrom, eventName, clientX,
clientY, data);
}
/**
* Drags and drops a web element from source to target
*
* @param driver
*
The WebDriver to execute on
* @param dragFrom
*
The WebElement to drag from
* @param dragTo
*
The WebElement to drag to
* @param dragFromX
*
The position to click relative to the top-left-corner of t
he
*
client
* @param dragFromY
*
The position to click relative to the top-left-corner of t
he
*
client
* @param dragToX
*
The position to release relative to the top-left-corner of
the
*
client
* @param dragToY
*
The position to release relative to the top-left-corner of
the
*
client
*/
public static void html5_DragAndDrop(WebDriver driver, WebElement dragFr
om, WebElement dragTo, int dragFromX, int dragFromY, int dragToX, int dragToY) {
((org.openqa.selenium.JavascriptExecutor)driver).executeScript(s
imulateHTML5DragAndDrop, dragFrom, dragTo, dragFromX, dragFromY, dragToX, dragTo
Y);
}

/**
* Drags and drops a web element from source to target
*
* @param driver
*
The WebDriver to execute on
* @param dragFrom
*
The WebElement to drag from
* @param dragTo
*
The WebElement to drag to
* @param dragFromPosition
*
The place to click on the dragFrom
* @param dragToPosition
*
The place to release on the dragTo
*/
public static void html5_DragAndDrop(WebDriver driver, WebElement dragFr
om, WebElement dragTo, Position dragFromPosition, Position dragToPosition) {
Point fromLocation = dragFrom.getLocation();
Point toLocation = dragTo.getLocation();
Dimension fromSize = dragFrom.getSize();
Dimension toSize = dragTo.getSize();
// Get Client X and Client Y locations
int dragFromX= fromLocation.getX() + (fromSize == null
ition.getX(dragFromPosition, fromSize.getWidth()));
int dragFromY= fromLocation.getY() + (fromSize == null
ition.getY(dragFromPosition, fromSize.getHeight()));
int dragToX= toLocation.getX() + (toSize == null ? 0 :
getX(dragToPosition, toSize.getWidth()));
int dragToY= toLocation.getY() + (toSize == null ? 0 :
getY(dragToPosition, toSize.getHeight()));

? 0 : Pos
? 0 : Pos
Position.
Position.

html5_DragAndDrop(driver, dragFrom, dragTo, dragFromX, dragFromY


, dragToX, dragToY);
}
//------------// Cross-Window Drag And Drop Example
//------------public void dragToWindow(WebDriver dragFromDriver, WebElement dragFromEl
ement, WebDriver dragToDriver) {
// Drag start
html5_simulateEvent(dragFromDriver, dragFromElement, "mousedown"
, Position.Center, null);
Object dragData = html5_simulateEvent(dragFromDriver, dragFromEl
ement, "dragstart", Position.Center, null);
dragData = html5_simulateEvent(dragFromDriver, dragFromElement,
"dragenter", Position.Center, dragData);
dragData = html5_simulateEvent(dragFromDriver, dragFromElement,
"dragleave", Position.Left, dragData);
dragData = html5_simulateEvent(dragFromDriver, dragFromDriver.fi
ndElement(By.tagName("body")), "dragleave", Position.Left, dragData);
// Drag to other window
html5_simulateEvent(dragToDriver, dragToDriver.findElement(By.ta
gName("body")), "dragenter", Position.Right, null);
WebElement dropOverlay = dragToDriver.findElement(By.className("
DropOverlay"));
html5_simulateEvent(dragToDriver, dropOverlay, "dragenter", Posi
tion.Right, null);

html5_simulateEvent(dragToDriver, dropOverlay, "dragover", Posit


ion.Center, null);
dragData= html5_simulateEvent(dragToDriver, dropOverlay, "drop",
Position.Center, dragData);
html5_simulateEvent(dragFromDriver, dragFromElement, "dragend",
Position.Center, dragData);
}

You might also like