title: Protractor custom drag and drop not working
body: <p>I need to move element with mouse, but since native browser.action() is not working , I try to use following method to do so:</p>
  
  <pre><code>module.exports = function simulateDragDrop(sourceNode, destinationNode) {
  console.log('simulatingDragDrop');
  var EVENT_TYPES = {DRAG_END: 'dragend', DRAG_START: 'dragstart', DROP: 'drop'}
  
  function createCustomEvent(type) {
      console.log('createCustomEvent');
      var event = new CustomEvent("CustomEvent")
      event.initCustomEvent(type, true, true, null)
      event.dataTransfer = {
          data: {}, setData: function (type, val) {
              this.data[type] = val
          }, getData: function (type) {
              return this.data[type]
          }
      }
      return event
  }
  
  function dispatchEvent(node, type, event) {
      if (node.dispatchEvent) {
          return node.dispatchEvent(event)
      }
      if (node.fireEvent) {
          return node.fireEvent("on" + type, event)
      }
  }
  
  var event = createCustomEvent(EVENT_TYPES.DRAG_START)
  dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)
  var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
  console.log(event.dataTransfer);
  console.log(dropEvent.dataTransfer);
  dropEvent.dataTransfer = event.dataTransfer
  dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)
  var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
  dragEndEvent.dataTransfer = event.dataTransfer
  dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
  </code></pre>
  
  <p>Then in test itself I have:</p>
  
  <pre><code>var dragAndDropFn = require('../../../services/native_js_drag_and_drop_helper');
  
  let elementA = element(by.automationId('ElementA'));
  let elementB = element(by.automationId('ElementB'));
  
  browser.executeScript(dragAndDropFn, elementA.getWebElement(), elementB.getWebElement());
  </code></pre>
  
  <p>It does work on simple html5 test page, but when I use it in my application it does nothing:</p>
  
  <p>My html is:</p>
  
  <pre><code>&lt;div _ngcontent-kxy-11="" class="handle" draggable="true"     automationid="ElementA"&gt;
  &lt;i _ngcontent-kxy-11="" class="icon-draghandle"&gt;&lt;/i&gt;
  </code></pre>
  
  <p> </p>
  
  <p>and same with ElementB. I do have to note that elements are found, and that is not the problem. Do you have any ideas ?</p>