Skip to content

reppners/ios-html5-drag-drop-shim

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iOS shim for HTML 5 drag'n'drop

The HTML 5 drag'n'drop API allows you to implement drag'n'drop with the same code on most desktop browsers. Unfortunately, you'll notice iOS doesn't support it, so no iPad (or Android) action for you!

Luckily, WebKit gives us enough tools to shim seamlessly. If you drop this script in your page your existing HTML 5 drag'n'drop code should just work.

Demos

Check out the demo to see it in action. It should work on Android, but I don't have an Android phone to test. Let me know @timruffles.

Install/config

If you want enter/over/leave events, add a config object to the page before you include the shim.

<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>

Shim behaviour

  • all drag events, with dragenter, dragover and dragleave enabled via config flag
  • creates a partially transparent drag image based on the dragged element

Thanks

To the amazing contributors who've provided massive extensions and fixes to the original.

@rem - who created the original demo used to demo this shim's drop-in nature.

License

MIT License

About

A drop-in shim to allow you to use existing html5 drag'n'drop code with mobile browsers

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 43.0%
  • HTML 33.1%
  • CSS 23.9%