March 2012
Intermediate to advanced
244 pages
5h 3m
English
Content preview from jQuery UI
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Chapter 10. Drag-and-Drop
Drag-and-drop is a common operation in web pages for moving an item (using the mouse to drop the item on another page element). For example, if the page displays images of articles to be purchased, users can drag an item into a cart that symbolizes all the goods to be purchased.
jQuery UI can manage these operations, distinguishing the operation of
“drag” (the movement of an object) and the operation of “drop” (the
depositing of the item being moved). For this, jQuery UI offers both the
draggable () and droppable () methods.
The draggable () Method
The draggable () method manages
elements of the HTML page you want to move. This method can be used in two
forms:
$(selector, context).draggable (options)$(selector, context).draggable ("action", params)
The draggable (options) Method
The draggable (options) method
declares that an HTML element can be moved in the HTML page. The
options parameter is an object that
specifies the behavior of the elements involved.
Specifying the movable elements
Use the options in Table 10-1 to indicate which
elements can be moved. By default, these are all elements of the list
on which the draggable (options)
method applies. These options can inhibit the displacement for all
items or only some, or even for moving a new item created on the
fly.
Table 10-1. Options for managing movable elements
Option | Function |
|---|---|
| When set to |
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.