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 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);

Thanks! This worked perfectly for me with the types!

Sorry to appear rather dense. How do I make sure that the symbol "jQuery" being passed to the self-compiling function is resolved correctly when I pass the contents of the above file to client.execute()? I tried this in my mocha test script:

var fs = require('fs');
var dragAndDrop = fs.readFileSync('test/e2e/helpers/drag_and_drop_helper.jslib'); // can't give it a .js extension or the test framework will try to execute it
...
    it('should drag and drop in browser', function() {
      return client
        .execute(dragAndDrop + '$("li.draggable-item:first-of-type").simulate("#drop-zone");');
    });

Mocha reports:
Error: unknown error: jQuery is not defined

I tried adding jQuery to the dependencies in package.json using npm install --save jquery, but it seems to have made no difference.

Can anyone tell me how to get this working in protractor?