Drag-and-Drop with jQuery: Your Essential Guide

Home : Articles : Drag-and-Drop with jQuery: Your Essential Guide Tutorial by Matt Doyle | Level: Intermediate | Published on 17 February 2011 Categories: Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Dragging and dropping can be a very intuitive way for users to interact with your site or web app. Moving email messages into folders Reordering lists of items Moving objects in games around, such as cards and puzzle pieces Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. In this tutorial we'll take a look at how to create drag-and-drop interfaces with jQuery, and we'll finish with a complete drag-and-drop example: a simple number cards game for kids. jQuery UI The easiest way to include both libraries is to use Google's CDN, as follows: Making elements draggable Adding draggable options containment 'parent' 'document' 'window'

Drag and drop with jQuery UI Sortable | Simon Battersby Last September I wrote a bespoke e-commerce solution for my wife’s website, including all the accompanying admin screens. One admin screen allows the amendment of the display order of items in a particular category. It was, if I’m honest, a bit clunky, as you had to type in the display order as a number, and then refresh the screen to see what the resultant re-order looked like. In response to repeated requests of “Can’t you make it drag and drop…?” I switched from responding with hollow laughter and actually had a look at how this might be done. And surprisingly, it was pretty straightforward. Setting up the database I already had a database with a table called items, each of which had a unique ID field and another field called Display_Order. Displaying the items on the “Maintain Display Order” admin page I started off just setting up the page to display all the items. <li id="ID_1">... Then, I added a bit of css to make my list into two columns of images to match the real page layout.

AJAX-ed Todo List With PHP, MySQL & jQuery Martin Angelov In this tutorial we are making a simple AJAX-ed Todo List App, with PHP, MySQL and jQuery. In the process we are going to demonstrate PHP’s OOP capabilities, play with jQuery UI and implement some nice AJAX functionality. For a better understanding of the steps of this tutorial, you an go ahead and download the demo archive available from the button above. Step 1 – PHP As this is more of a developer-oriented tutorial, we are going to start with the PHP part. The author presumes you have a basic understanding of the core concepts behind object oriented programming, and PHP 5’s OOP implementation. All of the functionality available to the end user – creating, editing, deleting and reordering the todo items – is implemented as different methods of a class, explained in detail below. todo.class.php – Part 1 class ToDo{ private $data; public function __construct($par){ if(is_array($par)) $this->data = $par; } public function __toString(){ return ' <li id="todo-'. demo.php – Part 1

Per Javascript: Bequemes Drag & Drop für Webanwendungen Anhand einer leicht anwendbaren Drag & Drop-Library und einer konkreten Aufgabe stellen wir Ihnen vor, wie Sie Drag & Drop effektiv und sinnvoll auf Ihrer Website einsetzen. Innerhalb des Admin-Bereichs einer Anwendung sollen einem Benutzer Rechte zugeordnet werden. Dazu sind zwei Spalten vorgesehen: Eine enthält die bereits zugewiesenen Berechtigungen, während die andere alle Rechte enthält, die der Nutzer nicht hat. Per Drag & Drop sollen die Rechte ganz einfach von einer Spalte in die andere verschoben werden können. Die beiden Spalten sind als ungeordnete Listen realisiert. Die <li>-Elementen stellen die einzelnen Rechte dar. Im onload-Event des aktuellen Fensters passiert der grundlegende Aufbau des Drag & Drop-Schemas. Das System identifiziert die beiden Rechte-Spalten anhand ihrer unterschiedlichen Id in pos_col und neg_col. Nachricht ans Backend schicken pos_col(3,9):neg_col(1,2,4,5,6,7,8) <html><head><title>Rechteverwaltung</title> body { margin: 10px 10px 10px 10px;

HTML5 Drag and Drop