Having trouble with Drag & Drop on Safari iOS? It seems that it won't drag or respond to drop on desktop or iPad

As I work on coding a webpage designed for viewing on an iPad, I have encountered an issue with Safari/Webkit's drag and drop functionality. Despite copying Safari's example code exactly, the drag and drop feature refuses to work as expected.

The Problem: When testing the webpage on Safari Desktop or Safari on an iPad, the ondrop event never seems to trigger. On the iPad specifically, I am unable to drag elements at all; the dragging cursor appears, but nothing happens when I try to move the elements with my finger. However, the drag function works perfectly on a desktop. What could be causing this discrepancy?

You can find a simple code example at the following link: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

<!DOCTYPE html>
<html>
...
</html>

For a demonstration, here is the JSFiddle: (Please note that the drag and drop functionality is Webkit-specific and only compatible with Safari, intended for iPads): https://jsfiddle.net/eyM3y/

javascripthtmlcsssafaridrag-and-drop

Answer №2

Have you taken a look at the header of the page you referenced in Apple's documentation? It specifically states:

Important: This feature is exclusively supported on desktop versions of Safari. For iOS, it is recommended to utilize DOM Touch, which can be found in Handling Events (part of Safari Web Content Guide) and Safari DOM Additions Reference.

Link to DOM Touch

Link to Safari DOM Additions

It seems like your best bet would be to pay attention to the touchmove and touchend events rather than relying on drag and drop events. :)

Answer №3

Dealing with a project hiccup, I stumbled upon a helpful tutorial that saved the day: . It did the trick for me, so I recommend giving it a try!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Native - The Animated.spring function experiences a flickering issue when the animation is reverted

I am currently working on implementing a drawer in my react native app. The issue I am facing is with the closing animation. When I click the close button, the animation seems to blink or flicker, as if it is opening and closing multiple times before final ...

javascriptandroidanimationreact-native

The intricacies of converting AudioBuffers to ArrayBuffers

I currently have an AudioBuffer stored on the client-side that I would like to send through AJAX to an express server. This link provides information on how a XMLHttpRequest can handle sending and receiving binary data in the form of an ArrayBuffer. In m ...

javascriptnode.jsamazon-web-servicesexpressweb-audio-api

How to center multiple divs in a row using HTML and CSS

I've been attempting to achieve a pretty basic task, but unfortunately my efforts have fallen short thus far. I have an image and a title that need to be centered within their parent div element. However, I'm struggling to find the proper way to ...

htmlcss

The duplication of printed keys and values from a JavaScript object is causing issues

I am working with a JSON object structured like this: var data = { "2020-01-20": ["08:00 - 09:00", "09:00 - 10:00"], "2020-01-21": ["08:00 - 09:00"] }; My objective is to display each value along with its corresponding key in a list format, as follow ...

javascriptjquery

What factors influence the timing of Chrome's spell-check feature for a particular word?

Currently, I am troubleshooting a bug in our code that is related to text input behavior. The issue at hand is that in one field, when you start typing on Chrome, the word does not get red underlined until you press space. However, in another field, Chrom ...

htmlgoogle-chromeautocorrect

What is the term used for a tag that automatically closes itself?

Within tag-based languages such as HTML or XML, there are tags that automatically close themselves without the need for a separate closing tag: <tag/> As opposed to the traditional method of closing tags like this: <tag></tag> Do thes ...

htmlxmltags

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

Numeric keypad causing issues with setting minimum and maximum lengths and displaying submit button

I designed a password pin page that resembles a POS NUMPAD for users to enter their password. I am struggling to make the condition specified in the JavaScript function properly. Rule: Hide the submit button if the minimum input is less than 4 characters ...

javascript

JavaScript hard-coded object functions as an argument, however it does not reference the global object

Recently, I encountered a strange issue while working with JQuery Flot. Initially, my code looked like this: var plot = null; function initPlot () { plot = $.plot("#graph", myData, { /* my options here */ }); } and everything was functioning correc ...

javascriptjqueryscopeflot

Tips for activating a sticky navigation button by scrolling down slightly

Currently in the process of developing a website using React and focusing on optimizing the mobile version first. One feature I am working on is to have a sticky navigation bar that remains at the top after scrolling down. In the attached picture, there is ...

htmlcssreactjs

Dealing with ASP.NET forms that involve a javascript plugin generating substitute input

I'm facing an issue with my ASP.NET MVC webpage where I submit a form using AJAX in the following way: function ValidateFormAndAjaxSubmit(formId, callingElement) { if (IsNotDblClick(callingElement.id)) { var _form = $("#" + formId); ...

javascriptjqueryajaxasp.net-mvcjquery-plugins

Using the splice() method to remove an item from an array may cause unexpected results in React applications

Dynamic input fields are being created based on the number of objects in the state array. Each field is accompanied by a button to remove it, but there seems to be unexpected behavior when the button is clicked. A visual demonstration is provided below: ...

javascriptarraysreactjs

Struggling with grasping the concept of Filtering Array in Eloquent Javascript Chapter 5?

Currently diving into the world of JavaScript through the enlightening pages of Eloquent JavaScript. Chapter 5 has been a breeze so far, except for one line of code inside a console.log statement that has me stumped: function filter(array, test) { ...

javascriptarraysobjectfilter

The ng-message function appears to be malfunctioning

I am facing an issue with the angularjs ng-message not working in my code snippet. You can view the code on JSfiddle <div ng-app="app" ng-controller="myctrl"> <form name="myform" novalidate> error: {{myform.definition.$error ...

javascriptangularjsangularjs-directiveng-messages

Workbox background sync - Retrieving replayed API responses

Currently, I am utilizing the Workbox GenerateSW plugin and implementing the backgroundSync option within runtimeCaching. You can find more information in the documentation here. This powerful plugin enables me to monitor APIs and successfully retry faile ...

javascriptreactjsworkboxworkbox-webpack-pluginbackground-sync

Converting JSON data to an array using an Ajax request

I am currently working on an HTML project where I have the following code: <div id="main"> <div id="blogcont"> <p></p> </div> <button class="nvgt" id="prev" >Previous</button> <button ...

javascriptjqueryajaxjson

Show or hide item by clicking outside the div

Looking for a way to use jQuery's slidetoggle to hide the showup class when clicking anywhere outside of the DIV. Any advice is appreciated! Check out this online SAMPLE: http://jsfiddle.net/evGd6/ <div class="click">click me</div> <d ...

javascriptjquery

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

javascriptjqueryhtmlcss

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

css

Modify the starting URL in a Node.js application to /foo instead of just /

I am looking to visit a website with a default index URL like localhost:XXXX/foo, instead of the usual localhost:XXXX/. How can I achieve this specific setup? Any suggestions on how to make this happen? ...

javascriptnode.jsexpress