Classes

• API Home
• _global_
• Array
• Jelo
• Jelo.Ajax
• Jelo.Anim
• Jelo.Core
• Jelo.CSS
• Jelo.Dom
• Jelo.DragDrop
• Jelo.Env
• Jelo.Event
• Jelo.JSON
• Jelo.Widget

Namespace Jelo.DragDrop

Provides element drag and drop detection.
Defined in: Jelo.DragDrop.js.

    Jelo.DragDrop.setDraggable(element, {
        before: function(event) {
            // the element currently being dragged
            var target = this;
            
            // all normal event properties and methods are available
            var x = event.clientX;
            var y = event.clientY;
            
            // this will avoid executing mousedown events on this element or its ancestors
            event.preventDefault();
            event.stopPropagation();
        }
    });

    Jelo.DragDrop.setDraggable(element, {
        before: function(event) {
            // default setup behavior
            Jelo.DragDrop.getBehavior('before').call(this, e);
            
            // any additional initialization you require
            $(this).addClass('dragging');
        },
        after: function(event) {
            Jelo.DragDrop.getBehavior('after').call(this, e);
            $(this).removeClass('dragging');
        }
    });

    Jelo.DragDrop.setDroppable(element, {
        enter: function(event) {
            // the element currently being dragged
            var target = event.dragTarget;
            
            // all normal event properties and methods are available
            var x = event.clientX;
            var y = event.clientY;
            event.stopPropagation();
        }
    });

    Jelo.DragDrop.setDroppable(element, {
        drop: function(event) {
            if ($(event.dragTarget).hasClass('my-element')) {
                
                // only apply default behavior to elements that pass the above check
                Jelo.DragDrop.getBehavior('drop').call(this, e);
                
            }
        }
    });

Returns:

{HTMLElement} The element currently being dragged, or null if unavailable.

Returns:

{Number} How many pixels an element must be dragged before its drag behavior actually "kicks in".

Parameters:

{HTMLElement} compare Optional

An element to examine.

Returns:

{Boolean} If compare is null, this function returns true if any element is currently being dragged. If compare is supplied, this function returns true if the supplied element is currently being dragged.

    Jelo.DragDrop.setDraggable(element, {
        before: function(event) {
            // the element currently being dragged
            var target = this;
            
            // all normal event properties and methods are available
            var x = event.clientX;
            var y = event.clientY;
            
            // this will avoid executing mousedown events on this element or its ancestors
            event.preventDefault();
            event.stopPropagation();
        }
    });

    Jelo.DragDrop.setDraggable(element, {
        before: function(event) {
            // default setup behavior
            Jelo.DragDrop.getBehavior('before').call(this, e);
            
            // any additional initialization you require
            $(this).addClass('dragging');
        },
        after: function(event) {
            Jelo.DragDrop.getBehavior('after').call(this, e);
            $(this).removeClass('dragging');
        }
    });

Parameters:

{HTMLElement|Array} element

One or more elements.

{Function|Object} fn Optional

If this argument is a function, it will be used as fn.drag (see below). If it is literally false, it will turn off all drag behavior for element.

{Function} fn.before Optional

Code to execute immediately before a drag operation takes place. Note that this is not called until the drag meets or exceeds the threshold.

{Function} fn.drag Optional

Code to execute while an element is being dragged. By default, it positions the element at the mouse cursor.

{Function} fn.after Optional

Code to execute when an element is dropped. This function runs before the drop target's drop handler.

{HTMLElement} handle Optional, Default: element

The "drag handle", meaning the element you actually use to drag element By default, the handle is the entire target element, but you may wish to specify a different element (for example, a panel might be dragged by only its title bar).

    Jelo.DragDrop.setDroppable(element, {
        enter: function(event) {
            // the element currently being dragged
            var target = event.dragTarget;
            
            // all normal event properties and methods are available
            var x = event.clientX;
            var y = event.clientY;
            event.stopPropagation();
        }
    });

    Jelo.DragDrop.setDroppable(element, {
        drop: function(event) {
            if ($(event.dragTarget).hasClass('my-element')) {
                
                // only apply default behavior to elements that pass the above check
                Jelo.DragDrop.getBehavior('drop').call(this, e);
                
            }
        }
    });

Parameters:

{HTMLElement|Array} element

One or more elements.

{Function|Object} fn Optional

If this argument is a function, it will be used as fn.drop (see below). If it is literally false, it will turn off all drop behavior for element.

{Function} fn.enter Optional

Code to execute once a draggable element begins to hover over element. Typically used to change element's styles to indicate valid or invalid drops.

{Function} fn.over Optional

Code to execute constantly while an element is dragged over element.

{Function} fn.leave Optional

Code to execute once a draggable element stops hovering over element.

{Function} fn.drop Optional

Code to execute after a draggable element is dropped on element. By default, the drag target becomes a child of element.

{HTMLElement} handle Optional, Default: element

The "drop handle", meaning the element you actually want to listen to drop events. By default, the handle is the entire target element, but you may wish to specify a different element depending on your intended behavior.

Parameters:

{Number} n

How many pixels an element must be dragged before its drag behavior actually "kicks in".