jquery ui draggable and droppable and dynamic content
I have a problem getting the jquery ui drag and drop functionality to
work as I would like in IE.
Basically, I have a list of products on the left, which can be dragged
to a cart on the right.
Both the product list and the product cart have been created
dynamically (their parent elements have their innerHTML replaced).
I use these two functions to attach the drag and drop functionality:
function addNewItemsDragDropCouponJs()
{
$("img.couponDraggable").draggable({
// when not dropped, the item will revert back to its initial
position
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
}
function addNewItemsDragDropCartJs()
{
$(".rightSideCell").droppable({
accept: 'img.couponDraggable',
activeClass: 'rightSideCellActive',
drop: function(event, ui)
{
// ASP.NET js webmethod
AddToCart(ui.draggable.attr('id'));
}
});
}
When the item is dragged from the left side and dropped into the cart,
the cart refreshes and the product list stays as it is (I want to be
able to add items to the cart more than once).
Here is the html for the page after a couple of items have been added:
<table>
<tbody>
<tr>
<td id="leftSideColumn" class="leftSideColumn">
<h4>
Recreation</h4>
<ul>
<li>
<img id="coupon-10" class="couponDraggable ui-draggable"
src="images/couponPage-single-mini.jpg" />
<b>Meijer</b>
<br />
<span>$15 Off Any Toy</span> </li>
<li>
<img id="coupon-13" class="couponDraggable ui-draggable"
src="images/couponPage-single-mini.jpg" />
<b>Meijer</b>
<br />
<span>$15 Off Any Toy</span> </li>
</ul>
</td>
<td id="rightSideColumn" class="rightSideColumn">
<table width="100%">
<tbody>
<tr>
<td id="rightSideCell" class="rightSideCell ui-droppable">
<table width="100%">
<tbody>
<tr>
<td colspan="2">
<b>Coupon Cart</b>
</td>
</tr>
<tr>
<td>
Meijer - $15 Off
</td>
<td>
<input type="button" onclick="return RemoveFromCart('0')"
value="-" />
</td>
</tr>
<tr>
<td>
Meijer - $25 Off
</td>
<td>
<input type="button" onclick="return RemoveFromCart('1')"
value="-" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Print Now" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Here is the function that runs when a webmethod succeeds:
// Callback function invoked on successful completion of the page
method.
function OnSucceeded(result, userContext, methodName)
{
if (methodName == "FilterCoupons")
{
// refresh product list
leftSideColumn.innerHTML = result;
addNewItemsDragDropCouponJs();
}
else if (methodName == "CartFunction")
{
// refresh cart
rightSideColumn.innerHTML = result;
addNewItemsDragDropCartJs();
}
}
This all works in Firefox, but not in IE. Does anybody have any ideas
for me?
Please let me know if I need to post some more details.
Thanks!