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

Practical prototype and part 46: 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. | 266 CHAPTER 11 ENABLING DRAGGABLES DROPPABLES AND SORTABLES Figure 11-3. Firebug logs our sanity-check event handler. Aha Progress. As a developer you might expect a drop to correspond with a movement in the DOM. The act of dragging an li over a ul feels like it ought to detach that li from its current parent and attach it to the new ul. But Firebug s HTML tab pictured in Figure 11-4 shows that the target ul is still empty. Figure 11-4. Firebug confirms that the drag-and-drop action did not change the draggable s position in the document. We can use our onDrop callback to append the draggable to the droppable. It takes three arguments the draggable element the droppable element and the mouseup event linked to the drop. CHAPTER 11 ENABLING DRAGGABLES DROPPABLES AND SORTABLES 267 Let s start by writing a general function that will get called for drops. We can use appendChild the built-in DOM method to add the draggable as a child of the droppable. function appendOnDrop draggable droppable event draggable We don t have to detach the draggable first appendChild works for moving elements. We could have used Element insert in the same way it behaves just like appendChild if it s passed a single element. Now we should use this function as the onDrop callback for the droppable. With these changes your script block should look like this script type text javascript dom loaded function function appendOnDrop draggable droppable event draggable container .select li .each function li new Draggable li drop_zone onDrop appendOnDrop script Now reload the page. Before you try the drag again go to Firebug s HTML tab and look at the source tree. Expand the body tag and you ll see our two uls one with children one without. If our code works correctly though the first list will lose a child and the second will gain a child. We ll see these changes in the source tree a node gets highlighted for a moment when its

• 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