如何在Selenium Java中的特定位置拖放？

Question

I am trying to drag & drop 2 elements into my workspace but they are dropped over each other, how can i specify the position of dropping the elements?

I am using dragAndDrop() function

Actions act=new Actions(driver);
act.dragAndDrop(From, To).build().perform(); 

enter image description here

Answer 1

Using dragAndDrop() method you can perform drag and drop operations on only one location at a time. it is usually used to perform operations on web element which is capable of dropping. please find the reference http://demoqa.com/droppable/ for various types of dropable elements.

To implement drag and drop operation -

Example:

 WebElement From=driver.findElement(By.xpath( <<source xpath>> ));
 WebElement To=driver.findElement(By.xpath( <<destination xpath>> ));
 Actions actions=new Actions(driver);
 actions.dragAndDrop(From, To).build().perform(); 

to drag and drop another element, you need to perform above all steps again.

Hope this helps :)

Answer 2

Try Using below code :

 public static  void dragAndDropViaJQueryHelper(WebDriver driver, String dragSourceJQuerySelector, String dropTargetJQuerySelector) {
        String jqueryScript = "(function( jquery ) {\r\n" + 
                "        jquery.fn.simulateDragDrop = function(options) {\r\n" + 
                "                return this.each(function() {\r\n" + 
                "                        new jquery.simulateDragDrop(this, options);\r\n" + 
                "                });\r\n" + 
                "        };\r\n" + 
                "        jquery.simulateDragDrop = function(elem, options) {\r\n" + 
                "                this.options = options;\r\n" + 
                "                this.simulateEvent(elem, options);\r\n" + 
                "        };\r\n" + 
                "        jquery.extend(jquery.simulateDragDrop.prototype, {\r\n" + 
                "                simulateEvent: function(elem, options) {\r\n" + 
                "                        /*Simulating drag start*/\r\n" + 
                "                        var type = 'dragstart';\r\n" + 
                "                        var event = this.createEvent(type);\r\n" + 
                "                        this.dispatchEvent(elem, type, event);\r\n" + 
                "\r\n" + 
                "                        /*Simulating drop*/\r\n" + 
                "                        type = 'drop';\r\n" + 
                "                        var dropEvent = this.createEvent(type, {});\r\n" + 
                "                        dropEvent.dataTransfer = event.dataTransfer;\r\n" + 
                "                        this.dispatchEvent(jquery(options.dropTarget)[0], type, dropEvent);\r\n" + 
                "\r\n" + 
                "                        /*Simulating drag end*/\r\n" + 
                "                        type = 'dragend';\r\n" + 
                "                        var dragEndEvent = this.createEvent(type, {});\r\n" + 
                "                        dragEndEvent.dataTransfer = event.dataTransfer;\r\n" + 
                "                        this.dispatchEvent(elem, type, dragEndEvent);\r\n" + 
                "                },\r\n" + 
                "                createEvent: function(type) {\r\n" + 
                "                        var event = document.createEvent(\"CustomEvent\");\r\n" + 
                "                        event.initCustomEvent(type, true, true, null);\r\n" + 
                "                        event.dataTransfer = {\r\n" + 
                "                                data: {\r\n" + 
                "                                },\r\n" + 
                "                                setData: function(type, val){\r\n" + 
                "                                        this.data[type] = val;\r\n" + 
                "                                },\r\n" + 
                "                                getData: function(type){\r\n" + 
                "                                        return this.data[type];\r\n" + 
                "                                }\r\n" + 
                "                        };\r\n" + 
                "                        return event;\r\n" + 
                "                },\r\n" + 
                "                dispatchEvent: function(elem, type, event) {\r\n" + 
                "                        if(elem.dispatchEvent) {\r\n" + 
                "                                elem.dispatchEvent(event);\r\n" + 
                "                        }else if( elem.fireEvent ) {\r\n" + 
                "                                elem.fireEvent(\"on\"+type, event);\r\n" + 
                "                        }\r\n" + 
                "                }\r\n" + 
                "        });\r\n" + 
                "})(jQuery);";
        ((JavascriptExecutor) driver).executeScript(jqueryScript);
        String dragAndDropScript = "jQuery('" + dragSourceJQuerySelector + "').simulateDragDrop({ dropTarget: '" + dropTargetJQuerySelector + "'});";
        ((JavascriptExecutor) driver).executeScript(dragAndDropScript);
    }

Just pass css or xpath selectors in parameters. Hope that helps you. If that does not help you I can help you out with some other solutions also.