Product drag & drop comparision tool Help

Hi friends,

[code=html]$(document).ready(function(){ /* comparisons drag-n-drop feature */
compareBoxEvents();
$(‘.compare-box’).append(‘<img align=”right” style=”visibility: hidden; cursor: pointer;” src=”images/prodcompare-remove.gif” class=”prodcompare-remove”>’);
$(‘.product-image’).draggable({cursorAt: {top: 10, left: 10} ,scroll: false, helper:
function() {
$(‘html,body’).animate({scrollTop: 0}, 500);
var tinyImg = this.src.replace(‘sm_image’,’tiny_image’);
tinyImg = tinyImg.replace(‘lg_image’,’tiny_image’);
return $(document.createElement(‘img’))
.attr(“src”,tinyImg)
.attr(“width”,’60’)
.appendTo(“body”)[0];
}
}); // make all product images draggable
//===========================
$(“.comparisons”).droppable({ // there are four compare boxes, which can receive
accept: “.product-image”, // any product image
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
tolerance: ‘touch’,
drop: function(ev, ui) {
// get productID
var productID = $(ui.element).attr(“id”).replace(‘product-image-‘,”);
// there must be an empty box,
// and the product must not already be in the box
var emptyBox = false;
var dupProd = false;
var counter = 0;
$(‘.compare-box’).each(function() {
if ($(‘.prodCompare’).eq(counter).val()==productID) {
dupProd = true;
}
if ($(‘.prodCompare’).eq(counter).val()==”) {
emptyBox = true;
}
if (emptyBox==false){
counter++;
}
});

if (dupProd==true) {
alert(‘This product has already been added to your comparison box.’);
return false;
}

if (emptyBox==false){
alert(‘You have already placed the maximum number of products (4) into the comparisons box. You may remove one or more of your current choices to add this product.’);
return false;
} else {
// do our thing
$.ajax({type:’POST’,url:’productcomparecart.php’,data:’action=add&product_ID=’+productID,success:
function(msg){
//cookies first, milk second
$(‘.prodCompare’).eq(counter).val(productID);
var tinyImg = $(ui.element).attr(“src”).replace(‘sm_image’,’tiny_image’);
tinyImg = tinyImg.replace(‘lg_image’,’tiny_image’);
var imgURL = ‘url(‘+tinyImg+’)’;
$(‘.compare-box’).eq(counter).css(‘background-image’,imgURL);
$(‘.compare-box’).eq(counter).addClass(‘compare-box-filled’);
compareBoxEvents();
}
}); // end ajax call to add to cookies
}
}
}); // });[/code]
[code=html]<div class=”dragdropdemo”><a href=”#”><img id=”product-image-37″ class=”product-image” src=”images/_33-1.jpg” alt=”Britax Vigour Single Stroller in Plum Purple” /></a>
<a href=”#”><img id=”product-image-38″ class=”product-image” src=”images/_252-1.jpg” alt=”Britax Vigour Single Stroller in Plum Purple” /></a> </div>
<p>Drag-and-drop me into the comparison box to the right (It’s fun!)</p>
<div class=”comparisons”>
<form id=”frmComparisons” method=”post” action=”#”>
<div class=”compare-info”>
<p>Drag-and-drop up to 4 strollers here to compare. <a href=”https://www.strollersdirect.com/stroller-comparisons.htm” class=”whatsthis”>What’s This?</a></p>
</div>
<div class=”compare-boxes”>
<div class=”compare-box compare-box-filled” id=”compare-box-1″ style=”background-image:url(images/prodcompare-remove.gif)”></div>
<div class=”compare-box compare-box-filled” id=”compare-box-2″ style=”background-image:url(images/prodcompare-remove.gif)”></div>
<div class=”compare-box compare-box-filled” id=”compare-box-3″ style=”background-image:url(images/prodcompare-remove.gif)”></div>
<div class=”compare-box compare-box-filled” id=”compare-box-4″ style=”background-image:url(images/prodcompare-remove.gif)”></div>
</div>

<div class=”compare-go”>
<input type=”image” value=”Compare” class=”compare-action” src=”images/compare-btn.gif” />
</div>
<input type=”hidden” name=”prodCompare1″ class=”prodCompare” id=”prodCompare1″ value=”1273″ />
<input type=”hidden” name=”prodCompare2″ class=”prodCompare” id=”prodCompare2″ value=”1148″ />
<input type=”hidden” name=”prodCompare3″ class=”prodCompare” id=”prodCompare3″ value=”34″ />
<input type=”hidden” name=”prodCompare4″ class=”prodCompare” id=”prodCompare4″ value=”37″ />
</form>
</div>[/code]

Above code was working before but i have added box system like there are 4 box under dropping down area where user can put their selected product only 4. But i drop any product nothing is happing i totally stuck here.

Can anyone please help me i want make 4 product comparison system

Also in #JavaScript _↴