I am creating objects on the page which are meant to be dragged and
dropped. Here is how I am enabling it:
$(this.element).draggable({
start: P.startDragging,
stop: P.stopDragging,
revert: 'valid',
containment: CONTAINER,
snap: SELECTOR,
scroll: true,
stack: { group: SELECTOR, min: 1 },
helper: 'original',
opacity: 0.7,
});
$(this.element).droppable({
accept: '.card',
activeClass: false,
addClasses: false,
hoverClass: 'dropHere',
tolerance: 'pointer',
over: P.draggingCardOver,
out: P.draggingCardOut,
drop: P.droppedCardOn,
});
On Firefox, it behaves as expected. Namely, if I click on a 'card' I can
drag it around to reposition it. If I drag a card over another card, the
events for over/out are firing. When I drop the card somewhere that is not
another card, the draggable::stop event is fired. When I drop on to a card,
the droppable::drop event is fired, instead.
On Safari, all the events APPEAR to be fired normally. However, once I drop
the card on another card, the card I was dragging remains slightly
transparent, and is no longer draggable. It is as though some kind of error
condition happened during the animation of moving the card back to its
original position, and so the animation never completed, and the element is
left in a broken state.
Has anyone else ever seen this? Any ideas what to look at in trying to
debug this?
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
