.. title:: MochiKit.DragAndDrop - drag and drop elements with MochiKit

Name
====

MochiKit.DragAndDrop - drag and drop elements with MochiKit

Synopsis
========

::

    // Create a draggable
    new Draggable('mydrag');

    // Create a corresponding droppable
    new Droppable('mydrop', {
        accept: ['drag-class'],
        ondrop: function (element) {
            alert('"' + element.id + '" was dropped on me');
        }
    });

Description
===========

MochiKit.DragAndDrop enables you the power of dragging elements
through your pages, for richer interfaces.

Dependencies
============

- :mochiref:`MochiKit.Base`
- :mochiref:`MochiKit.Iter`
- :mochiref:`MochiKit.DOM`
- :mochiref:`MochiKit.Color`
- :mochiref:`MochiKit.Visual`
- :mochiref:`MochiKit.Signal`

Overview
========

The implementation was adapted from Scriptaculous_.

.. _Scriptaculous: http://script.aculo.us

API Reference
=============

Constructors
------------

:mochidef:`Draggable(element[, options])`:

    A object that can be drag with the mouse.

    You have the following options, with corresponding default values:

    ``handle (false)``:
        Option for giving the element where starting the drag. By
        default it's the element itself, but you can either put a
        class of a subelement or the id of another element as handle.

    ``starteffect (MochiKit.Visual.Opacity)``:
        Function called once the drag has begun, taking the dragged
        element as argument. It's an effect by default but you can
        define any callback.

    ``reverteffect (MochiKit.Visual.Move)``:
        Effect applied when drag is cancelled. You have to define the
        ``revert`` option to enable the call. By default it brings the
        element back to its initial position, so you should know what
        you want when you modify this. The function should return an
        effect that can be cancelled.

    ``endeffect (MochiKit.Visual.Opacity)``:
        Pending part of starteffect. If you have modified your element
        during start, you'd usually want to revert it in the function.

    ``zindex (1000)``:
        Zindex of the drag element. By default it brings it to front.

    ``revert (false)``:
        Indicate if the reverteffect function should be called. If you
        define a function here, this function will be called before
        reverteffect, with the element as first argument.

    ``snap (false)``:
        Define the behaviour of the drag element when moving. It can
        either be a function, a value or an array of two values. If
        it's a function, it should take the (x, y) position of the
        element as arguments, and return the position draw in the
        browser. If its a value, it's used as a modulo for each
        coordinates. If it's an array, each value is applied for the
        corresponding coordinate.

    ``selectclass (null)``:
        If defined, name of CSS class applied during the drag.

    ``ghosting (null)``:
        Make a ghost from the draggable: clone it at start, then
        remove the clone at end.

    ``onchange  (MochiKit.Base.noop)``:
        Function called when updates are made on the draggable object.

    ``scroll (false)``:
        Element to scroll around, if precised. For example, ``window``
        will allow the draggable to scroll in the page.

    ``scrollSensitivity (20)``:
        Scroll sensitivity, used when scroll is used.

    ``scrollSpeed (15)``:
        Scroll speed, used when scroll is used.

    A draggable generates some signals during its lifetime: start, drag and
    end. They are available through the Draggables handler, and are called
    with a draggable as argument. You can register a callback for these events
    like this::
        
        onStart = function (draggable) {
            // Do some stuff
        };

        connect(Draggables, 'start', onStart);


    *Availability*:
        Available in MochiKit 1.4+


:mochidef:`Droppable(element[, options])`:

    A object where you can drop a draggable.

    You have the following options, with corresponding default values:

    ``greedy (true)``:
        Stop on this droppable when a draggable drops over it.

    ``hoverclass (null)``:
        If defined, name of CSS class applied when a draggable is
        hover the droppable element (hover state).

    ``hoverfunc (MochiKit.Base.noop)``:
        Function called on hover state.

    ``accept (null)``:
        Array of CSS classes allowed to drop on this.

    ``activeclass (null)``:
        If defined, name of CSS class applied if a possible draggable
        begins its start (active state).

    ``onactive (MochiKit.Base.noop)``:
        Function called on active state.

    ``containment ([])``:
        Specify a list of elements to check for active state: only the
        children of the specified elements can be dropped. Mainly
        useful for Sortable.

    ``onhover (MochiKit.Base.noop)``:
        Specific hover function, mainly used for Sortable.

    ``ondrop (MochiKit.Base.noop)``:
        Function called when a draggable is dropped. The function
        takes three arguments: the draggable element, the droppable
        element, and the event that raised the drop.

    *Availability*:
        Available in MochiKit 1.4+


Authors
=======

- Thomas Herve <therve@gmail.com>
- Bob Ippolito <bob@redivi.com>
- Originally adapted from Script.aculo.us <http://script.aculo.us/>

Copyright
=========

Copyright 2005 Bob Ippolito <bob@redivi.com>.  This program is
dual-licensed free software; you can redistribute it and/or modify it
under the terms of the `MIT License`_ or the `Academic Free License
v2.1`_.

.. _`MIT License`: http://www.opensource.org/licenses/mit-license.php
.. _`Academic Free License v2.1`: http://www.opensource.org/licenses/afl-2.1.php

Portions adapted from `Scriptaculous`_ are available under the terms
of the `MIT License`_.