| <!DOCTYPE html> |
| <style>* { font-family: monospace; }</style> |
| <div id="host">[<span id="one" slot="one">One</span> <span id="two" slot="two">Two</span>]</div> |
| <script> |
| function doDrag(start, end) { |
| if (!window.eventSender) |
| return; |
| eventSender.mouseMoveTo(start.offsetLeft + (start.offsetWidth / 2), start.offsetTop + 3); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(end.offsetLeft + (end.offsetWidth / 2), end.offsetTop + 3); |
| eventSender.mouseUp(); |
| } |
| var host = document.querySelector('#host'); |
| var shadowRoot = host.attachShadow({mode: 'open'}); |
| shadowRoot.innerHTML = '[<slot name="two"></slot> <slot name="one"></slot>]'; |
| var one = document.querySelector('#one'); |
| var two = document.querySelector('#two'); |
| doDrag(two, one); |
| </script> |
