The "revert" behavior appears (to me anyways) to indicate that the
item wasn't dropped on a valid drop target, so I don't like it that
dropping an item on the "basket" area still shows the item reverting.
Here's a handy little trick to make it not revert when dropped on a
droppable:
$('div.droppable').Droppable({
/* your configuration stuff */
accept: 'item',
activeclass: 'dropzoneactive',
hoverclass: 'dropzonehover',
tolerance: 'pointer',
/* no revert on drop stuff */
onHover: function(drag) { /* drag is the associated Draggable */
drag.dragCfg.fx = 0; /* dragCfg is the Draggable's
configuration object */
},
onOut: function(drag) {
drag.dragCfg.fx = 300; /* Same duration as was configured in
the draggable
},
onDrop: function(drag) {
drag.dragCfg.fx = 300;
/* your onDrop stuff here */
}
});
What happens here is the fx parameter determines how long the "revert"
animation will take. If it's 0, the revert animation won't happen. So
when an item is hovering over a droppable, we set fx to 0, and when an
item is moved off of the droppable, we reset fx. Since changing fx
changes it permanently, we need to also reset it when we drop an item
so the next time we drag this draggable, fx will be set correctly.
On our site, we wanted dropped items to "shrink" into the drop target,
but we had to modify interface to make that work. Not reverting on
drop is at least better than nothing I think, and doesn't require
modifying any libraries (which I hate doing).
--Erik
On 5/15/07, David <[EMAIL PROTECTED]> wrote:
hi There,
If you take a look at the interface plugin demos
(http://interface.eyecon.ro/demos) you will find a
demonstration of a shopping cart that does pretty much what you would like:
http://interface.eyecon.ro/demos/cart.html
Regards,
David
cfdvlpr wrote:
Has anyone done a shopping cart using JQuery? I'm about to try and
create a nice spiffy shopping cart that allows the user to add and
edit items in a cart without refreshing the page. Before I start,
does anyone have any tips, advice, or source code to share to help me
get started?
