adding drag events using jQuery

Question

I am using jQuery to add dragStart events to a button.

Here is my html:

$('.btn-photo').on('dragstart', function (event) {});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SinglePhoto" class="btn-section btn-photo" draggable="true"></div>

This works in Chrome but not Safari. Does anyone know why?

In Safari, I can drag the element but it does not show it as being dragged. In Chrome, I can drag the element and I see it being dragged.

Any help would be greatly appreciated! Thank you!

That's browser implementation... Obviously Chrome is better than Safari and has more support. — Praveen Kumar Purushothaman, Oct 26 '18 at 22:05

score 1 · Answer 1 · answered Oct 26 '18 at 22:28

I'm not sure if this is 100% the right way to do it, but you could try setting the drag image using setDragImage on the dataTransfer property of the event:

$('.btn-photo').on('dragstart', function (event) {
    event.preventDefault();
    let img = $(this)[0];
    event.dataTransfer.setDragImage(img, 0, 0);
});

I've also thrown an event.preventDefault() in there just in case it has something to do with that (I'm not on Safari so can't test).

Reference

adding drag events using jQuery

1 Answers1