HTML and CSS Reference
In-Depth Information
Nowweneed tocreate the function totest whether the bulbbeing dragged isthe same onewe
aretestingin onCBulbClicked() .Todothis,wesimplyloopthroughthe bulbs arrayandsee
whether any bulb has its dragging property set to true :
function currentlyDragging () {
isDragging = false
for ( var
var i = 0 ; i < bulbs . length ; i ++ ) {
iif ( bulbs [ i ]. dragging ) {
isDragging = true
true ;
return isDragging ;
When the user clicks (a mouseup event is fired on the Canvas DOM object), we want to send
a message to the display list so that we can check to see whether any of the objects in the list
have been clicked:
function onMouseUp ( event ) {
displayList . onMouseUp ( event );
When a mousemove event is fired on the Canvas DOM object, we want to do two things:
1. Move the bulb that is currently being dragged to be under the mouse pointer by setting
its x and y properties to the x and y location of the mouse.
2. Check to see whether the mouse is over any clickable objects, and if so, change the
look of the pointer to “hand” (to signify a button), using CSS. We do this by looping
through all of the Ornament objects (both factory and copy ones) and checking a hit
test point collision detection routine to see whether the mouse is over any of them. If it
isoverone,wesetthestyleofthemouseto “pointer” (bysettingthecursorvariable).
If not, we set it to “default” . Then we update the style like this:
theCanvas . style . cursor = cursor ;
function onMouseMove ( event ) {
var x ;
Search WWH ::

Custom Search