Synthesizing drag events

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

Synthesizing drag events

Postby milian » Mon Feb 01, 2016 10:31 am

Hey all,

I'm trying to generate drag events for JavaScript, similar to what was discussed in this older thread: viewtopic.php?f=6&t=13220

Sadly, the proposed solution there does not work for me, and I'm also unsure whether the above thread really did what I'm looking into. My demo HTML code looks like this:

Code: Select all
<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
    console.log("hello world!");
      function allowDrop(ev) {
          console.log("allowDrop");
          ev.preventDefault();
      }
      function drag(ev) {
          console.log("drag");
          ev.dataTransfer.setData("text", ev.target.id);
      }
      function drop(ev) {
          console.log("drop");
          ev.preventDefault();
          var data = ev.dataTransfer.getData("text");
          ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div style="background: red; padding: 50px;">
      <img id="dragme" src="http://phantomjs.org/img/phantomjs-logo.png" draggable="true" ondragstart="drag(event)" />
    </div>
    <div id ="dropme" ondrop="drop(event)" ondragover="allowDrop(event)" style="background: blue; padding: 50px;">
    </div>
  </body>
</html>


Then via my code in PhantomJS-CEF that I'm trying to extend with Drag&Drop features I sent a mouse down click event into the dragme img, followed by a mouse move into the dropme div, followed by a mouse up. I see the console message for the "drag" start, but then neither the allowDrop nor the drop code paths are triggered. I notice the following eventstream when I install an eventlooger - is there anything suspicious in here?

Code: Select all
mousedown: {
  "isTrusted": "true",
  "screenX": "63",
  "screenY": "63",
  "clientX": "63",
  "clientY": "63",
  "ctrlKey": "false",
  "shiftKey": "false",
  "altKey": "false",
  "metaKey": "false",
  "button": "0",
  "buttons": "1",
  "relatedTarget": "null",
  "pageX": "63",
  "pageY": "63",
  "x": "63",
  "y": "63",
  "offsetX": "5",
  "offsetY": "5",
  "movementX": "0",
  "movementY": "0",
  "fromElement": "null",
  "toElement": "{}",
  "which": "1",
  "webkitMovementX": "0",
  "webkitMovementY": "0",
  "layerX": "63",
  "layerY": "63",
  "detail": "1",
  "sourceCapabilities": "{}",
  "type": "\"mousedown\"",
  "target": "{}",
  "eventPhase": "1",
  "bubbles": "true",
  "cancelable": "true",
  "defaultPrevented": "false",
  "srcElement": "{}",
  "returnValue": "true",
  "cancelBubble": "false"
}
mousemove: {
  "isTrusted": "true",
  "screenX": "13",
  "screenY": "198",
  "clientX": "13",
  "clientY": "198",
  "ctrlKey": "false",
  "shiftKey": "false",
  "altKey": "false",
  "metaKey": "false",
  "button": "0",
  "buttons": "1",
  "relatedTarget": "null",
  "pageX": "13",
  "pageY": "198",
  "x": "13",
  "y": "198",
  "offsetX": "5",
  "offsetY": "5",
  "movementX": "0",
  "movementY": "0",
  "fromElement": "null",
  "toElement": "{}",
  "which": "1",
  "webkitMovementX": "0",
  "webkitMovementY": "0",
  "layerX": "13",
  "layerY": "198",
  "detail": "0",
  "sourceCapabilities": "{}",
  "type": "\"mousemove\"",
  "target": "{}",
  "eventPhase": "1",
  "bubbles": "true",
  "cancelable": "true",
  "defaultPrevented": "false",
  "srcElement": "{}",
  "returnValue": "true",
  "cancelBubble": "false"
}
drag <-- this is the console.log above
mouseup: {
  "isTrusted": "true",
  "screenX": "13",
  "screenY": "198",
  "clientX": "13",
  "clientY": "198",
  "ctrlKey": "false",
  "shiftKey": "false",
  "altKey": "false",
  "metaKey": "false",
  "button": "0",
  "buttons": "0",
  "relatedTarget": "null",
  "pageX": "13",
  "pageY": "198",
  "x": "13",
  "y": "198",
  "offsetX": "5",
  "offsetY": "5",
  "movementX": "0",
  "movementY": "0",
  "fromElement": "null",
  "toElement": "{}",
  "which": "1",
  "webkitMovementX": "0",
  "webkitMovementY": "0",
  "layerX": "13",
  "layerY": "198",
  "detail": "0",
  "sourceCapabilities": "{}",
  "type": "\"mouseup\"",
  "target": "{}",
  "eventPhase": "1",
  "bubbles": "true",
  "cancelable": "true",
  "defaultPrevented": "false",
  "srcElement": "{}",
  "returnValue": "true",
  "cancelBubble": "false"
}


Should this work in principle? I.e. will the mouse move be translated into drag events for the JavaScript? Or do I need to wrap the Drag* API in CefBrowserHost? As far as I understood, that API is only required to drag external data into CEF - is that correct?
milian
Techie
 
Posts: 28
Joined: Tue Oct 13, 2015 11:05 am

Re: Synthesizing drag events

Postby milian » Thu Feb 11, 2016 9:42 am

Ping?

Anything that I'm missing? Can someone at least confirm that the discussion done here: http://magpcss.org/ceforum/viewtopic.php?f=6&t=560 is not related to what I'm trying to do?

Thanks
milian
Techie
 
Posts: 28
Joined: Tue Oct 13, 2015 11:05 am

Re: Synthesizing drag events

Postby magreenblatt » Thu Feb 11, 2016 10:50 am

milian wrote:Ping?

Anything that I'm missing? Can someone at least confirm that the discussion done here: viewtopic.php?f=6&t=560 is not related to what I'm trying to do?

Thanks

I don't think that discussion is related.

What OS and CEF version are you using? How does your example behave in an equivalent version of Google Chrome?
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm


Return to Support Forum

Who is online

Users browsing this forum: Google [Bot] and 40 guests