CODEWITHSUNDEEP
javascriptjquerydrag-and-dropdrag
Chris Hansen
Chris Hansen

Reputation: 8687

adding drag events using jQuery

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!

Upvotes: 0

Views: 3389

Answers (1)

markmoxx
markmoxx

Reputation: 1542

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

Upvotes: 1

Related Questions