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. });