Delegate drag event to other element jQuery

Question

I have following html on my page:

<div class="group-one" >
    <p><span id="handle" draggable="true">::</span> click me</p>
</div>

<div class="group-two" draggable="true">
    <p>I should be dragged</p>
</div>

Now what I want is that when #handle is dragged, the drag event should be delegated to div.group-two and element under move cursor should be div.group-two either. This is what I have tried:

$('#handle').mousedown(function(e){
    $('.group-two').trigger(e);
});

$('#handle').on('dragstart', function(e){
    $('.group-two').trigger(e);
});

$('.group-two').on('dragstart', function(e){
    console.log('dragestart triggered on group-two');
});

$('.group-two').mousedown(function(e){
    console.log("mousedown triggered on group-two");
});

Here is a jsfiddle .

The problem here is that although event is delegated to div.group-two but element being dragged under the move cursor is still span#handle .

Now my question is that, Is it possible to delegate drag in this manner? If it is, then any hint how to achieve it.

Note that I am using plain jQuery not jQuery UI.

Answer 1

Probably not. Personally it doesn't work for me, and after a bit of digging I found this extension someone made to help resolve it: https://www.bitovi.com/blog/delegate-able-drag-drop-events-for-jquery

I suspect it has something to do with the originalEvent being a trusted event and hence we can't modify its contents.

If you don't want to use the extension, perhaps consider relying on the quirk that users can only drag one thing at a time; and hence storing the data in a global variable (if its just going to be in the browser) would work. That's what I'm about to do :)