drag_and_drop_helper.js

(function( $ ) {
    $.fn.simulateDragDrop = function(options) {
        return this.each(function() {
            new $.simulateDragDrop(this, options);
        });
    };
    $.simulateDragDrop = function(elem, options) {
        this.options = options;
        this.simulateEvent(elem, options);
    };
    $.extend($.simulateDragDrop.prototype, {
        simulateEvent: function(elem, options) {
            /*Simulating drag start*/
            var type = "dragstart";
            var event = this.createEvent(type);
            this.dispatchEvent(elem, type, event);

            /*Simulating drag over*/
            type = 'dragover';
            var dragOverEvent1 = this.createEvent(type, {});
            var $dragOverTarget1 = $(elem);
            dragOverEvent1.clientX = $dragOverTarget1.offset().left + $dragOverTarget1.width() / 2;
            dragOverEvent1.clientY = $dragOverTarget1.offset().top + $dragOverTarget1.height() / 2;
            this.dispatchEvent(elem, type, dragOverEvent1);

            type = 'dragover';
            var dragOverEvent2 = this.createEvent(type, {});
            var $dragOverTarget2 = $(options.dropTarget);
            dragOverEvent2.clientX = $dragOverTarget2.offset().left + $dragOverTarget2.width() / 2;
            dragOverEvent2.clientY = $dragOverTarget2.offset().top + $dragOverTarget2.height() / 2;
            this.dispatchEvent($dragOverTarget2[0], type, dragOverEvent2);

            /*Simulating drop*/
            type = "drop";
            var dropEvent = this.createEvent(type, {});
            dropEvent.dataTransfer = event.dataTransfer;
            var target;
            if (options.dropTargetFrame) {
                target = $(document.querySelector(options.dropTargetFrame).contentDocument.querySelector(options.dropTarget))[0];
            }
            else {
                target = $(options.dropTarget)[0];
            }
            this.dispatchEvent(target, type, dropEvent);

            /*Simulating drag end*/
            type = "dragend";
            var dragEndEvent = this.createEvent(type, {});
            dragEndEvent.dataTransfer = event.dataTransfer;
            this.dispatchEvent(elem, type, dragEndEvent);
        },
        createEvent: function(type) {
            var event = document.createEvent("CustomEvent");
            event.initCustomEvent(type, true, true, null);
            event.dataTransfer = {
                data: {
                },
                types: [],
                setData: function(type, val){
                    this.types.push(type);
                    this.data[type] = val;
                },
                getData: function(type){
                    return this.data[type];
                }
            };
            return event;
        },
        dispatchEvent: function(elem, type, event) {
            if(elem.dispatchEvent) {
                elem.dispatchEvent(event);
            }else if( elem.fireEvent ) {
                elem.fireEvent("on"+type, event);
            }
        }
    });
})(jQuery);

Can you please clarify the license for this gist?

How can I use this in Java?

@Rameshwar-Juptimath You'll need some sort of JavaScript environment (with DOM) loaded in Java.

This was originally meant to be used in Selenium tests. If your goal is testing a web app, than check out the Selenium bindings for Java. And more specifically - the JavascriptExecutor class - and how to use that to inject the code above into the web page you're working with.

P.S. Note that this depends on jQuery.
P.P.S. For examples see the original gits this was forked from: https://gist.github.com/rcorreia/2362544

ty @joankaradimov :) Will follow up there.

Hi @joankaradimov,
I am trying to using this with this code but getting error. Please help me on this.

Code:

String js_filepath = "C:\Users\Documents\draganddrop.js";
String java_script="";
String text;

        BufferedReader input = new BufferedReader(new FileReader(js_filepath));
        StringBuffer buffer = new StringBuffer();

        while ((text = input.readLine()) != null)
            buffer.append(text + " ");
        java_script = buffer.toString();

        input.close();

        String source = "a[title='xyz']";
        String target = "p[class='xyz']";
        java_script = java_script+"$('#"+source+"').simulate( '#"+target+"');" ;
        ((JavascriptExecutor)webDriverManager.driver).executeScript(java_script);

Error:
org.openqa.selenium.JavascriptException: javascript error: Unexpected token 'this'
(Session info: chrome=90.0.4430.93)

I had a missing semicolon, which I fixed. Which would have worked fine if you weren't replacing new lines with spaces when reading the file:

while ((text = input.readLine()) != null)
    buffer.append(text + " ");

I have question:
is there a way to use xpath instead of CSS ?
The endpoint element is hidden, it is only visible when dragged close to that position.
Is there a way to drag to the intermediate position and then drop to the endpoint?