/** * @class Ext.drag.Source * @extend Ext.drag.Item * * A wrapper around a DOM element that allows it to be dragged. * * ## Constraining * * The {@link #constrain} config gives various options for limiting drag, for example: * - Vertical or horizontal only * - Minimum/maximum x/y values. * - Snap to grid * - Constrain to an element or region. * * See {@link Ext.drag.Constrain} for detailed options. * * * new Ext.drag.Source({ * element: dragEl, * constrain: { * // Drag only vertically in 30px increments * vertical: true, * snap: { * y: 30 * } * } * }); * * ## Data * * Data representing the underlying drag is driven by the {@link #describe} method. This method * is called once at the beginning of the drag. It should populate the info object with data using * the {@link Ext.data.Info#setData setData} method. It accepts 2 arguments. * * - The `type` is used to indicate to {@link Ext.drag.Target targets} the type(s) of data being provided. * This allows the {@link Ext.drag.Target target} to decide whether it is able to interact with the source. * All types added are available in {@link Ext.data.Info#types types}. * - The value can be a static value, or a function reference. In the latter case, the function is evaluated * when the data is requested. * * The {@link Ext.drag.Info#getData} method may be called once the drop completes. The data for the relevant type * is retrieved. All values from this method return a {@link Ext.Promise} to allow for consistency when dealing * with synchronous and asynchronous data. * * ## Proxy * * A {@link #proxy} is an element that follows the mouse cursor during a drag. This may be the {@link #element}, * a newly created element, or none at all (if the purpose is to just track the cursor). * * See {@link Ext.drag.proxy.None for details}. * * var data = [{ * id: 1, * name: 'Adam' * }, { * id: 2, * name: 'Barbara' * }, { * id: 3, * name: 'Charlie' * }]; * * var tpl = new Ext.XTemplate( * '<div class="container">', * '<tpl for=".">', * '<div class="child" data-id="{id}">{name}</div>', * '</tpl>', * '</div>' * ); * * var el = tpl.append(Ext.getBody(), data); * * new Ext.drag.Source({ * element: el, * handle: '.child', * proxy: { * type: 'placeholder', * getElement: function(info) { * return Ext.getBody().createChild({ * cls: 'foo', * html: info.eventTarget.innerHTML * }); * } * } * }); * * * ## Handle * * A {@link #handle} is a CSS selector that allows certain child elements of the {@link #element} * to begin a drag. This is useful in 2 case: * - Where only a certain part of the element should trigger a drag, but the whole element should move. * - When there are several repeated elements that may represent objects. * * In the example below, each child element becomes draggable and * the describe method is used to extract the id from the DOM element. * * * var data = [{ * id: 1, * name: 'Adam' * }, { * id: 2, * name: 'Barbara' * }, { * id: 3, * name: 'Charlie' * }]; * * var tpl = new Ext.XTemplate( * '<div class="container">', * '<tpl for=".">', * '<div class="child" data-id="{id}">{name}</div>', * '</tpl>', * '</div>' * ); * * var el = tpl.append(Ext.getBody(), data); * * new Ext.drag.Source({ * element: el, * handle: '.child', * describe: function(info) { * info.setData('item', Ext.fly(info.eventTarget).getAttribute('data-id')); * } * }); * */ /** * @cfg {String/Object/Ext.drag.proxy.Base} [proxy='original'] * The proxy to show while this element is dragging. This may be * the alias, a config, or instance of a proxy. * * See {@link Ext.drag.proxy.None None}, {@link Ext.drag.proxy.Original Original}, * {@link Ext.drag.proxy.Status Status}. * @accessor */ /** * @cfg {Boolean/String/String[]} [activeOnLongPress=false] * `true` to always begin a drag with longpress. `false` to * never drag with longpress. If a string (or strings) are passed, it should * correspond to the pointer event type that should initiate a a drag on * longpress. See {@Ext.event.Event#pointerType} for available types. * @accessor */ /** * @cfg {String} [activeCls=null] * A css class to add to the {@link #element} while dragging is * active. * @accessor */ /** * @cfg {Object/Ext.util.Region/Ext.dom.Element} [constrain=null] * * Adds constraining behavior for this drag source. See {@link Ext.drag.Constraint} for * configuration options. As a shortcut, a {@link Ext.util.Region Region} * or {@link Ext.dom.Element} may be passed, which will be mapped to the * appropriate configuration on the constraint. * @accessor */ /** * @cfg {String} [handle=null] * A CSS selector to identify child elements of the {@link #element} that will cause * a drag to be activated. If this is not specified, the entire {@link #element} will * be draggable. * @accessor */ /** * {String/Object/Ext.drag.proxy.Base} [proxy='original'] * The proxy to show while this element is dragging. This may be * the alias, a config, or instance of a proxy. * * See {@link Ext.drag.proxy.None None}, {@link Ext.drag.proxy.Original Original}, * {@link Ext.drag.proxy.Status Status}. * @accessor */ /** * @cfg {Boolean/Object} [revert=false] * `true` (or an animation configuration) to animate the {@link #proxy} (which may be * the {@link #element}) back to the original position after drag. * @accessor */ /** * @cfg {Function} describe * See {@link #method-describe}. */ /** * @event beforedragstart * Fires before drag starts on this source. Return `false` to cancel the drag. * * @param {Ext.drag.Source} this This source. * @param {Ext.drag.Info} info The drag info. * @param {Ext.event.Event} event The event. */ /** * @event dragstart * Fires when the drag starts on this source. * * @param {Ext.drag.Source} this This source. * @param {Ext.drag.Info} info The drag info. * @param {Ext.event.Event} event The event. */ /** * @event dragmove * Fires continuously as this source is dragged. * * @param {Ext.drag.Source} this This source. * @param {Ext.drag.Info} info The drag info. * @param {Ext.event.Event} event The event. */ /** * @event dragend * Fires when the drag ends on this source. * * @param {Ext.drag.Source} this This source. * @param {Ext.drag.Info} info The drag info. * @param {Ext.event.Event} event The event. */ /** * @event dragcancel * Fires when a drag is cancelled. * * @param {Ext.drag.Source} this This source. * @param {Ext.drag.Info} info The drag info. * @param {Ext.event.Event} event The event. */ /** * @method isDragging * Checks whether this source is actively dragging. * @return {Boolean} `true` if this source is dragging. */