Java Reference
In-Depth Information
If the dragged element's parent node is the target drop zone, you set the className property to an
empty string and exit the function using the return statement. Otherwise, you want to move the
dragged element node from its old parent/drop target to its new parent/drop target:
draggedEl.parentNode.removeChild(draggedEl);
this.appendChild(draggedEl);
This is a simple process, as you can see. To remove the draggable element from its current parent, you
retrieve its parentNode and call the removeChild() method. The removeChild() method doesn't
delete the node; it simply removes it so that you can append it to another node in the DOM.
With the dragged element moved from one drop target to another, the drag‐and‐drop operation is
complete, and you set the drop target element's CSS class to an empty string:
this.className = "";
This visually resets the drop target, giving users a visual cue that the drag‐and‐drop operation is
complete.
A web page is an interactive environment. Users are busy clicking, typing, dragging, and doing other
things. As such, events are an extremely important matter for web developers. Not only are events
how we respond and interact with the user, they also enable us to execute code when specific things
happen in the page. In later chapters, you see examples of such and use events to respond to an
object's action, rather than a user's action.
summarY
You've covered a lot in this chapter, but now you have a solid basis on how to work with and handle
events in the browsers that are currently in use on the web. You even know the difference between
the standard DOM event model and old‐IE's event model, and you wrote an event utility that makes
writing cross‐browser JavaScript relatively simple.
This chapter covered the following points:
You saw that HTML elements have events as well as methods and properties. You handle
these events in JavaScript by using event handlers, which you connect to code that you want
to have executed when the event occurs. The events available for use depend on the object
you are dealing with.
You can connect a function to an element's event handler using the element's “ on ” attributes.
But you also learned that doing so mixes your HTML and JavaScript, and this approach
should be avoided most of the time.
Events can be handled by using an object's "on" properties, which is a better solution than
the HTML attributes, but still has its own issues.
The standard DOM event model is supported by all modern browsers, and it provides the
best way to connect your code to events.
 
 
Search WWH ::




Custom Search