<!DOCTYPE html>
<style>* { font-family: monospace; }</style>
<div id="host">[<span id="one">One</span> <span id="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.createShadowRoot();
shadowRoot.innerHTML = '[<content select="#two"></content> <content select="#one"></content>]';
var one = document.querySelector('#one');
var two = document.querySelector('#two');
doDrag(two, one);
</script>