Practical prototype and part 45: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | 260 CHAPTER 11 ENABLING DRAGGABLES DROPPABLES AND SORTABLES Making Draggables Making draggables is easy. The Draggable constructor the initialize method that gets called when you instantiate a class takes care of assigning the events that control dragging it also handles communication with any droppables it encounters. The default options for Draggable enable an element to be moved anywhere on the page but to make an element interact with potential drop targets you ll have to specify some options of your own. So let s add some options. Reload the page and then run this code in the console container .select li .each function li new Draggable li revert true Play around with the draggables and you ll notice the difference they now move back or revert to their original positions at the end of the drag. Another option controls how much freedom the draggable has in its movement. Reload and try this code container .select li .each function li new Draggable li snap 50 Notice that these draggables move far less fluidly. The 50 value for snap tells them to snap to points on the page that are separated by 50 pixels in both directions. Before each movement of the mouse also moved the draggable now the draggable moves to the closest x y coordinates that are both multiples of 50. We could also have specified two values for snap 10 50 creates a grid of points 10 pixels apart on the x axis and 50 points apart on the y axis. Better yet we can set snap to a function that determines on each movement of the mouse where the draggable should snap to. Advanced usage of draggables will be covered later in the chapter. One other option deserves mention. The handle option lets you specify a smaller piece of the draggable not the whole draggable to serve as the drag-enabled area of the element. A drag operation intercepts all clicks and cancels the associated events so handles can be used to enable dragging without interfering with form element interaction link clicking and so on. CHAPTER 11
