How to disable Draggables in script.aculo.us

Question

Hi-

I'm trying to make a group of objects draggable as you can see below - easy enough. But I'd like to configure things so that if any one of these items gets dragged, the others automatically cease to be draggable. Does anyone know how to do this?

var products = document.getElementsByClassName('box');
for (var i = 0; i < products.length; i++) {
  new Draggable(products[i].id, {ghosting:true})
}

Also, is it possible, after you've made an object draggable, to selectively and individually trigger its 'onStart', 'onEnd', or 'Revert' sequences through code, not using the mouse?

Thanks very much.

Answer 1

Save the Draggables in a collection and call destroy() on them when one of them is dragged (ie, onEnd is fired):

var draggables = [];
var products = document.getElementsByClassName('box');
for (var i = 0; i < products.length; i++) {
    var draggable = new Draggable(products[i].id, {
        ghosting:true,
        onEnd: function () {
            draggables.invoke('destroy');
        }
    });
    draggables.push(draggable)
}