Exercise - Event basics with jQuery

by Seetha Chitti

HTML

<div id="container">
    
    <h1>Events</h1>
    
    <div class="wrapper">
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
    </div>
    
</div>

CSS

.item{
    float:left;
    margin:0 10px 10px 0;
}

.wrapper{
    width:250px;
}

/*.item:hover img,*/
.item.hover img{
    outline:2px solid #f90;
}

.clone {
    position: absolute;
}

JavaScript

// Event handling with jQuery
//
// Step 1
// 
// Set up an event handler to clone the element on 'mousedown'
$('.wrapper').on('click','.item',function(evt){
    var clone = $(this).clone();
    clone.addClass("clone hover");
	clone.appendTo("body");
    clone.css({top: evt.pageY, left: evt.pageX});
    $(document).on('mousemove',function(evt){
        clone.css({top: evt.pageY, left: evt.pageX});
    });
    $(document).on('keypress',function(evt){
        if(evt.which == 13){
        	$(document).off('mousemove');
        }
    });
});
// Step 2
//
// Watch for mouse movements and adjust the clone's position