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?