Steve Fenton

Jquery Mobile Drag And Drop

Quick 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.

Mobile Drag And Drop Demonstration.

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.

If you find my open source projects and jQuery plugins useful,
please consider making a donation!

Requirements

• jquery.js
• jquery.mobiledraganddrop.js

CSS

/* Recommended styles */
		
		.drag {
			float: left;
			width: 21%;
			background-color: Green;
			color: White;
			margin: 10px 2%;
			cursor: move;
			text-align: center;
			-moz-border-radius: 1em;
			-webkit-border-radius: 1em;
			border-radius: 1em;
		}
		
		.selected {
			background-color: Yellow;
			color: Black;
		}
		
		.drop {
			background-color: Blue;
			color: White;
			margin: 3px;
			padding: 10px;
			-moz-border-radius: 1em;
			-webkit-border-radius: 1em;
			border-radius: 1em;
		}
		.active {
			background-color: orange;
			cursor: crosshair;
		}

JavaScript

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

With all options set:

$(".drag").mobiledraganddrop({
    "classmodifier": "mobiledraganddrop",
    "targets": ".drop",
    "status": "",
    "selectedclass": "selected",
    "activeclass": "active"
});

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