Skip to Navigation or Skip to Content

Steve Fenton
Author of The Reason Your Website Sucks

Jquery Mobile Drag And Drop

You Are Here: Home » JavaScript » Mobile Drag And Drop

Jquery Mobile Drag And DropQuick Links

Visit the jQuery Mobile Drag And Drop project hub, which has a demonstration and download for this plugin on JS Plugins JavaScript Plugin Library.

Description

The jQuery Mobile Drag And Drop project is a plugin for the jQuery JavaScript Framework, which provides a drag and drop interface on desktop browsers with fallback "tap to lift" and "tap to drop" interface on touch-screen mobile devices.

Requirements

CSS

  1. /* Recommended styles */
  2.  
  3. 		.drag {
  4. 			float: left;
  5. 			width: 21%;
  6. 			background-color: Green;
  7. 			color: White;
  8. 			margin: 10px 2%;
  9. 			cursor: move;
  10. 			text-align: center;
  11. 			-moz-border-radius: 1em;
  12. 			-webkit-border-radius: 1em;
  13. 			border-radius: 1em;
  14. 		}
  15.  
  16. 		.selected {
  17. 			background-color: Yellow;
  18. 			color: Black;
  19. 		}
  20.  
  21. 		.drop {
  22. 			background-color: Blue;
  23. 			color: White;
  24. 			margin: 3px;
  25. 			padding: 10px;
  26. 			-moz-border-radius: 1em;
  27. 			-webkit-border-radius: 1em;
  28. 			border-radius: 1em;
  29. 		}
  30. 		.active {
  31. 			background-color: orange;
  32. 			cursor: crosshair;
  33. 		}

JavaScript

  1. $(".drag").mobiledraganddrop({ targets: ".drop" });

With all options set:

  1. $(".drag").mobiledraganddrop({
  2.     "classmodifier": "mobiledraganddrop",
  3.     "targets": ".drop",
  4.     "status": "",
  5.     "selectedclass": "selected",
  6.     "activeclass": "active"
  7. });