JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

Exercise1:


<div id="products">
    <div class="ui-widget-content">
      

<li data-id="1" class = "bank" id="seven" ><a href="#" style="color:#FFFFFF;" class="button button-green">my</a> </li>
            <li data-id="3" class="bank" id="third"><a href="#" style="color:#FFFFFF;" class="button button-orange">new </a></li>
          
          
<table width="100%">
    <tr><td>
<table width="100%" border=1>
    <tr>
        <td  width : '33%'><div id="shoppingCart1" class="shoppingCart">
    <div align="center" class="ui-widget-content">
       <ol id="amt1" style="list-style:none">
            <li class="placeholder">&nbsp;</li>
        </ol>
    </div>
</div>
     </td>
        <td><div id="shoppingCart2" class="shoppingCart">
    <div align="center" class="ui-widget-content">
       <ol id="amt2" style="list-style:none">
            <li class="placeholder">&nbsp;</li>
        </ol>
    </div>
</div> 
        </td>
    </tr></table>
         <br/>  <br/> 
        
        <input id="resetButtonId" type="button" value="reset"/>
        <br/>  <br/>  <br/>

CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;}
li.ui-draggable-dragging{
   list-style:none;
}
.ui-widget-content ul li
{
    display: block;
	float: left;
	line-height: 30px;
	list-style:none;
	margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:40px;
    
}
.hidden{
    visibility:hidden;
}
#equal
{display:none;
}
#notequal
{display:none;
}
#my
{display:none;
}
#bankledger
{display:none;
}
#iphone
{display:none;
}

#bal
{display:none;
}

.button-purple {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #733aab #8040be #8040be;
}
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 20px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
     color:#FFFFFF;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top,...

JavaScript

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
  
});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".bank",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        
       
        var productid = ui.draggable.attr("data-id");
       if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid
           
        });
        
       var cartid = self.closest('.shoppingCart').attr('value');
   $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
        
        self.html(listItem);
        
           
  
       
    }
});
$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".bank",
    drop: function(event, ui) {
       var self = $(this);
        self.find(".placeholder").remove();
   
        var productid = ui.draggable.attr("data-id");
       if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid
           
           
        });
         
        
          //To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('value');
    $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    
        self.html(listItem);
        
    }
});

$(function(){
    $('#resetButtonId').click(function(){
       
     $( "ol li" ).empty();   
    }); 
    
});