Hello,
To perform drag and drop operation on FlexGrid you can use the below shared code snippet:
public static void DragDropOperation(this IWebDriver driver, IWebElement sourceElement, IWebElement targetElement, string position = "center center", bool shouldPerformDrop = true)
{
var pos = position.Split(' ');
string horizontalDelta = "", verticalDelta = "";
switch (pos[0])
{
case "top": horizontalDelta = "targetCoordinates.width * 0.25"; break;
case "bottom": horizontalDelta = "targetCoordinates.width * 0.75"; break;
default: horizontalDelta = "targetCoordinates.width * 0.5"; break;
}
switch (pos[1])
{
case "top": verticalDelta = "targetCoordinates.height * 0.25"; break;
case "bottom": verticalDelta = "targetCoordinates.height * 0.75"; break;
default: verticalDelta = "targetCoordinates.height * 0.5"; break;
}
var dropScript = $@"
function completeDrag(){{
// simulate a drop event on the target element
var dropEvent = createEvent(
""drop"",
{{
clientX: targetCoordinates.left + {horizontalDelta},
clientY: targetCoordinates.top + {verticalDelta},
dataTransfer: dragStartEvent.dataTransfer
}}
);
targetElement.dispatchEvent(dropEvent);
// simulate a drag end event on the source element
var dragEndEvent = createEvent(
""dragend"",
{{
clientX: targetCoordinates.left + {horizontalDelta},
clientY: targetCoordinates.top + {verticalDelta},
dataTransfer: dragStartEvent.dataTransfer
}}
);
sourceElement.dispatchEvent(dragEndEvent);
// simulate a mouseup event on the target element
var mouseUpEvent = createEvent(
""mouseup"",
{{
clientX: targetCoordinates.left + {horizontalDelta},
clientY: targetCoordinates.top + {verticalDelta}
}}
);
targetElement.dispatchEvent(mouseUpEvent);
}}
function cancelDrag(){{
// simulate a drag end event on the source element
var dragEndEvent = createEvent(
""dragend"",
{{
clientX: sourceCoordinates.left + sourceCoordinates.width / 2,
clientY: sourceCoordinates.top + sourceCoordinates.height / 2,
dataTransfer: dragStartEvent.dataTransfer
}}
);
sourceElement.dispatchEvent(dragEndEvent);
}}
";
var script = $@"
var CustomDataTransfer = function () {{
this.data = {{}};
}};
CustomDataTransfer.prototype.dropEffect = ""move"";
CustomDataTransfer.prototype.items = [];
CustomDataTransfer.prototype.types = [];
CustomDataTransfer.prototype.clearData = function(format) {{
if (format)
{{
delete this.data[format];
var index = this.types.indexOf(format);
if (index > -1)
{{
delete this.types[index];
delete this.data[index];
}}
}}
else
{{
this.data = {{ }};
}}
}};
CustomDataTransfer.prototype.setData = function(format, data) {{
this.data[format] = data;
this.items.push(data);
this.types.push(format);
}};
CustomDataTransfer.prototype.getData = function(format) {{
if (format in this.data) {{
return this.data[format];
}}
return """";
}};
function createEvent(eventName, options)
{{
var event = document.createEvent(""CustomEvent"");
event.initCustomEvent(eventName, true, true, null);
event.view = window;
event.detail = 0;
event.ctlrKey = false;
event.altKey = false;
event.shiftKey = false;
event.metaKey = false;
event.button = 0;
event.relatedTarget = null;
// if the clientX and clientY options are specified,
// also calculated the screenX and screenY values
if(options.clientX && options.clientY) {{
event.screenX = window.screenX + options.clientX;
event.screenY = window.screenY + options.clientY;
}}
// copy the rest of the options into the event object
for (var prop in options) {{
event[prop] = options [prop];
}}
return event;
}}
function executeDragAndDrop(sourceElement, targetElement)
{{
if (typeof sourceElement == ""string"")
{{
sourceElement = document.querySelector(sourceElement);
}}
if (typeof targetElement == ""string"")
{{
targetElement = document.querySelector(targetElement);
}}
// get the coordinates of both elements,
// left refers to X, and top to Y
var sourceCoordinates = sourceElement.getBoundingClientRect();
var targetCoordinates = targetElement.getBoundingClientRect();
// simulate a mouse down event on the coordinates of the source element
var mouseDownEvent = createEvent(
""mousedown"",
{{
clientX: sourceCoordinates.left + sourceCoordinates.width / 2,
clientY: sourceCoordinates.top + sourceCoordinates.height / 2
}}
);
sourceElement.dispatchEvent(mouseDownEvent);
// simulate a drag start event on the source element
var dragStartEvent = createEvent(
""dragstart"",
{{
clientX: sourceCoordinates.left + sourceCoordinates.width / 2,
clientY: sourceCoordinates.top + sourceCoordinates.height / 2,
dataTransfer: new CustomDataTransfer()
}}
);
sourceElement.dispatchEvent(dragStartEvent);
// simulate a drag event on the source element
var dragEvent = createEvent(
""drag"",
{{
clientX: sourceCoordinates.left + sourceCoordinates.width / 2,
clientY: sourceCoordinates.top + sourceCoordinates.height / 2
}}
);
sourceElement.dispatchEvent(dragEvent);
// simulate a drag enter event on the target element
var dragEnterEvent = createEvent(
""dragenter"",
{{
clientX: targetCoordinates.left + {horizontalDelta},
clientY: targetCoordinates.top + {verticalDelta},
dataTransfer: dragStartEvent.dataTransfer
}}
);
targetElement.dispatchEvent(dragEnterEvent);
// simulate a drag over event on the target element
var dragOverEvent = createEvent(
""dragover"",
{{
clientX: targetCoordinates.left + {horizontalDelta},
clientY: targetCoordinates.top + {verticalDelta},
dataTransfer: dragStartEvent.dataTransfer
}}
);
targetElement.dispatchEvent(dragOverEvent);
{dropScript}
{(shouldPerformDrop? "completeDrag();" : "window['completeDrag'] = completeDrag;window['cancelDrag'] = cancelDrag;")}
}}
executeDragAndDrop(arguments[0], arguments[1]);
";
((IJavaScriptExecutor)driver).ExecuteScript(script, sourceElement, targetElement);
driver.Wait(TimeSpan.FromMilliseconds(500));
}
// In the following code snippet:
// 'sourceElement' represents the columnHeader cell element of the source column,
// 'targetElement' represents the columnHeader cell element of the target column (where to drop).
Selenium’s DragAndDrop or MoveToElement methods do not work as expected due to some events not being triggered in the required order by Selenium. To address this, you can execute the above script to perform the drag and drop operation. If you encounter any difficulties, please feel free to inform us, and we will be glad to assist you.
Regards
