Skip to main content

Drag & Drop on Safari iOS: Wont drag, wont respond to drop on desktop/iPad


I am coding a webpage to be viewed on iPad. It uses Safaris/Webkits drag & drop. I have exactly copied Safari's example drag & drop code but it wont work.



My Problem: The ondrop event is never triggered when I run the webpage(HTML, CSS & Javascript) on Safari Desktop or on Safari on an iPad. On ipad I cannot even drag the elements(the microscope thingie appears & it wont drag when I hold & move my finger over the element). The drag does work on desktop though.



Whats going wrong?



The small code example can be found at the very bottom of this page: http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html



Here is the JSFiddle (remember the drag & drop is Webkit so only for Safari-this webpage is for ipad only): http://jsfiddle.net/eyM3y/


Source: Tips4allCCNA FINAL EXAM

Comments

  1. Working alternative :

    Firstly, use jquery UI http://jqueryui.com/demos/ for drag and drop functionality

    and then add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.

    Hope it helps.

    ReplyDelete
  2. I had a similar issue with one of my project but it can be resolved by following tutorial: http://popdevelop.com/2010/08/touching-the-web/ . It works for me I hope you will like it.

    ReplyDelete
  3. Did you read the top of the page you linked to in Apple's documentation? It says:


    Note: This technology is supported only on desktop versions of Safari. For iOS, use DOM Touch, described in Handling Events (part of Safari Web Content Guide) and Safari DOM Additions Reference.


    DOM Touch link

    Safari DOM Additions link

    I believe you may want to listen for the touchmove and touchend events instead of on drag and on drop. :)

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?

Java Urban Myths

Along the line of C++ Urban Myths and Perl Myths : What are the Java Urban Myths? That is, the ideas and conceptions about Java that are common but have no actual roots in reality . As a Java programmer, what ideas held by your fellow Java programmers have you had to disprove so often that you've come to believe they all learned at the feet of the same drunk old story-teller? Ideally, you would express these myths in a single sentence, and include an explanation of why they are false.

CCNA 1 Final Exam 2011 latest (hot hot hot)

  Hi! I have been posted content of ccna1 final exam (latest and only question.) I will post the answer and insert image on sunday. If you care, please subscribe your email an become a first person have full test content. Subcribe now  Some question  have not content because this question have images content. So that can you wait for me? SUNDAY 1. A user sees the command prompt: Router(config-if)# . What task can be performed at this mode? Reload the device. Perform basic tests. Configure individual interfaces. Configure individual terminal lines. 2. Refer to the exhibit. Host A attempts to establish a TCP/IP session with host C. During this attempt, a frame was captured with the source MAC address 0050.7320.D632 and the destination MAC address 0030.8517.44C4. The packet inside the captured frame has an IP source address 192.168.7.5, and the destination IP address is 192.168.219.24. At which point in the network was this packet captured? leaving host A leaving ATL leaving...