TAILIEUCHUNG - Practical prototype and scipt.aculo.us part 45

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

• Kỹ thuật lập trình
• Phương pháp lập trình
• lập trình website
• các bước cơ bản khi lập trình
• công thức lập trình web
• thao tác khi lập trình
• Phương pháp lập trình hướng đối tượng
• Lập trình hướng đối tượng
• Bài giảng Lập trình hướng đối tượng
• Bài tập lập trình hướng đối tượng
• Bài giảng Phương pháp lập trình
• Quy tắc chuyển đổi
• Ngôn ngữ lập trình
• Kiểu dữ liệu
• Kỹ thuật lập trình
• Kiểu lập trình
• Lập trình thủ tục
• lập trình căn bản
• lập trình java
• kỹ thuật máy tính
• thủ thuật lập trình
• kinh nghiệm lập trình
• lập trình đối tượng
• tài liệu lập trình
• lập trình mạng máy tính
• chuyên ngành lập trình
• Ngôn ngữ lập trình C
• Học lập trình C
• Lý thuyết lập trình
• Ngôn ngữ lập trình C C++
• Tự học lập trình
• Học lập trình
• Chuỗi ký tự lập trình
• Lập trình C#
• Phương pháp lập trình cổ điển
• Cấu trúc điều khiển
• Biến dối tượng
• Xử lý dữ liệu
• bài tập phương pháp lập trình
• mẹo lập trình
• Lớp và đối tượng
• Lập trình hướng thủ tục
• Chương trình vẽ uml
• code lập trình
• kỹ thuật phần mềm
• chương trình lập trình
• giáo trình lập trình
• bài giảng lập trình C++
• phương pháp lập trình cấu trúc
• phép tham chiếu
• Bài giảng Nguyên lý và phương pháp lập trình
• Nguyên lý và phương pháp lập trình
• Kiểm chứng tính đúng đắn
• Lập trình có cấu trúc
• Tổng quan các ngôn ngữ lập trình