Đang chuẩn bị liên kết để tải về tài liệu:
Practical prototype and scipt.aculo.us part 46

Practical prototype and scipt.aculo.us 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 droppable.appendChild 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 document.observe dom loaded function function appendOnDrop draggable droppable event droppable.appendChild draggable container .select li .each function li new Draggable li Droppables.add 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