JSFiddle - React, Tailwind, and code Playground

by acodesmith

HTML

<div class="pointer">
    <h3>Items</h3>
    <div class="cart"></div>
</div>

<div class="item" id="1">Item 1</div>
<div class="item" id="2">Item 2</div>
<div class="item" id="3">Item 3</div>
<div class="item" id="4">Item 4</div>

CSS

.pointer {
    padding:5px;
    background:#e1e1e1;
    position:absolute;
    color:#999;
    display:none;
    font-family:'Trebuchet MS';
}

.item {
 width:50px;
  height:50px;
   float:left;
   border:#999; 
    margin:10px;
    padding:10px;
    background:#ccc;
    border:1px solid #ccc;
}
.item.p {
    border:1px solid #cc0000;
}

.cart {
    font-size:12px;   
}

JavaScript

$(document).ready(function(){
    
    p = $(".pointer");
    
    $(window).mousemove(function(e){    
        
        if(!p.is(":animated")){
            
            p.fadeTo("fast", 0.8);
            p.animate({
                left: e.pageX+"px",
                top: e.pageY+"px"
            }, 300, 'linear', function(){
                var position = p.position();
                if(position.left != e.pageX){
                   p.animate({
                        left: e.pageX+"px",
                        top: e.pageY+"px"
                    }, 200);
                }else{
                    p.animate({
                        left: (e.pageX+3)+'px',
                        top: (e.pageY+3)+'px'
                    }, 300); 
                } 
            });
        }
    });
    $(".item").click(function(){
        if($(this).hasClass("p")){
            $(this).removeClass("p");
            $(".cartItem."+$(this).attr("id")).remove();
        }else{
            $(this).addClass("p");
            var o = '<div class="cartItem '+$(this).attr('id')+'">'+$(this).text()+'</div>'
            p.find(".cart").prepend(o);
        }
    });
});