ext.dd.dragdrop.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.dd.DragDrop-props"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.dd.DragDrop-methods"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.dd.DragDrop-events"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                        <a class="bookmark" href="../docs/?class=Ext.dd.DragDrop"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
        </div>
                <h1>Class Ext.dd.DragDrop</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td class="hd-info">Ext.dd</td></tr>
            <tr><td class="label">Defined In:</td><td class="hd-info">DDCore.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">DragDrop</td></tr>
                        <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.dd.DD" href="output/Ext.dd.DD.html">DD</a>, <a ext:cls="Ext.dd.DDTarget" href="output/Ext.dd.DDTarget.html">DDTarget</a></td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
                    </table>
        <div class="description">
            Defines the interface and base operation of items that that can be
dragged or can be drop targets.  It was designed to be extended, overriding
the event handlers for startDrag, onDrag, onDragOver and onDragOut.
Up to three html elements can be associated with a DragDrop instance:
<ul>
<li>linked element: the element that is passed into the constructor.
This is the element which defines the boundaries for interaction with
other DragDrop objects.</li>
<li>handle element(s): The drag operation only occurs if the element that
was clicked matches a handle element.  By default this is the linked
element, but there are times that you will want only a portion of the
linked element to initiate the drag operation, and the setHandleElId()
method provides a way to define this.</li>
<li>drag element: this represents the element that would be moved along
with the cursor during a drag operation.  By default, this is the linked
element itself as in <a ext:cls="Ext.dd.DD" href="output/Ext.dd.DD.html">Ext.dd.DD</a>.  setDragElId() lets you define
a separate element that would be moved, as in <a ext:cls="Ext.dd.DDProxy" href="output/Ext.dd.DDProxy.html">Ext.dd.DDProxy</a>.
</li>
</ul>
This class should not be instantiated until the onload event to ensure that
the associated elements are available.
The following would define a DragDrop obj that would interact with any
other DragDrop obj in the "group1" group:
<pre>dd = new Ext.dd.DragDrop("div1", "group1");</pre>
Since none of the event handlers have been implemented, nothing would
actually happen if you were to run the code above.  Normally you would
override this class or one of the default implementations, but you can
also override the methods you want on an instance of the class...
<pre>dd.onDragDrop = function(e, id) {
&nbsp;&nbsp;alert("dd was dropped on " + id);
}</pre>        </div>
        
        <div class="hr"></div>
                <a id="Ext.dd.DragDrop-props"></a>
        <h2>Public Properties</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Property</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="property-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-available"></a>
            <b>available</b> : boolean            <div class="mdesc">
                            The availabe property is false until the linked dom element is accessible.                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-config"></a>
            <b>config</b> : object            <div class="mdesc">
                            Configuration attributes passed into the constructor                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-defaultPadding"></a>
            <b>defaultPadding</b> : Object            <div class="mdesc">
                            Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-groups"></a>
            <b>groups</b> : object            <div class="mdesc">
                        <div class="short">The group defines a logical collection of DragDrop objects that are
related.  Instances only get events when interact...</div>
            <div class="long">
                The group defines a logical collection of DragDrop objects that are
related.  Instances only get events when interacting with other
DragDrop object in the same group.  This lets us define multiple
groups using a single DragDrop subclass if we want.            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-hasOuterHandles"></a>
            <b>hasOuterHandles</b> : boolean            <div class="mdesc">
                        <div class="short">By default, drags can only be initiated if the mousedown occurs in the
region the linked element is.  This is done in...</div>
            <div class="long">
                By default, drags can only be initiated if the mousedown occurs in the
region the linked element is.  This is done in part to work around a
bug in some browsers that mis-report the mousedown if the previous
mouseup happened outside of the window.  This property is set to true
if outer handles are defined.            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-id"></a>
            <b>id</b> : String            <div class="mdesc">
                        <div class="short">The id of the element associated with this object.  This is what we
refer to as the "linked element" because the size...</div>
            <div class="long">
                The id of the element associated with this object.  This is what we
refer to as the "linked element" because the size and position of
this element is used to determine when the drag and drop objects have
interacted.            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-invalidHandleClasses"></a>
            <b>invalidHandleClasses</b> : Array            <div class="mdesc">
                            An Array of CSS class names for elements to be considered in valid as drag handles.                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-invalidHandleIds"></a>
            <b>invalidHandleIds</b> : Object            <div class="mdesc">
                        <div class="short">An object who's property names identify the IDs of elements to be considered invalid as drag handles.
A non-null prop...</div>
            <div class="long">
                An object who's property names identify the IDs of elements to be considered invalid as drag handles.
A non-null property value identifies the ID as invalid. For example, to prevent
dragging from being initiated on element ID "foo", use:<pre><code>{
    foo: true
}</code></pre>            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-invalidHandleTypes"></a>
            <b>invalidHandleTypes</b> : Object            <div class="mdesc">
                        <div class="short">An object who's property names identify HTML tags to be considered invalid as drag handles.
A non-null property value...</div>
            <div class="long">
                An object who's property names identify HTML tags to be considered invalid as drag handles.
A non-null property value identifies the tag as invalid. Defaults to the 
following value which prevents drag operations from being initiated by &lt;a> elements:<pre><code>{
    A: <em>"A"</em>
}</code></pre>            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-isTarget"></a>
            <b>isTarget</b> : boolean            <div class="mdesc">
                            By default, all insances can be a drop target.  This can be disabled by
setting isTarget to false.                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-maintainOffset"></a>
            <b>maintainOffset</b> : boolean            <div class="mdesc">
                        <div class="short">Maintain offsets when we resetconstraints.  Set to true when you want
the position of the element relative to its par...</div>
            <div class="long">
                Maintain offsets when we resetconstraints.  Set to true when you want
the position of the element relative to its parent to stay the same
when the page changes            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-padding"></a>
            <b>padding</b> : int[]            <div class="mdesc">
                            The padding configured for this drag and drop object for calculating
the drop zone intersection with this object.                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-primaryButtonOnly"></a>
            <b>primaryButtonOnly</b> : boolean            <div class="mdesc">
                        <div class="short">By default the drag and drop instance will only respond to the primary
button click (left button for a right-handed m...</div>
            <div class="long">
                By default the drag and drop instance will only respond to the primary
button click (left button for a right-handed mouse).  Set to true to
allow drag and drop to start with any mouse click that is propogated
by the browser            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-xTicks"></a>
            <b>xTicks</b> : int[]            <div class="mdesc">
                        <div class="short">Array of pixel locations the element will snap to if we specified a
horizontal graduation/interval.  This array is ge...</div>
            <div class="long">
                Array of pixel locations the element will snap to if we specified a
horizontal graduation/interval.  This array is generated automatically
when you define a tick interval.            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="property-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-yTicks"></a>
            <b>yTicks</b> : int[]            <div class="mdesc">
                        <div class="short">Array of pixel locations the element will snap to if we specified a
vertical graduation/interval.  This array is gene...</div>
            <div class="long">
                Array of pixel locations the element will snap to if we specified a
vertical graduation/interval.  This array is generated automatically
when you define a tick interval.            </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
            </table>
                <a id="Ext.dd.DragDrop-methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-DragDrop"></a>
            <b>DragDrop</b>(&nbsp;<code>String id</code>, <code>String sGroup</code>, <code>object config</code>&nbsp;)            <div class="mdesc">
                        <div class="short"></div>
            <div class="long">
                    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>id</code> : String<div class="sub-desc">of the element that is linked to this instance</div></li><li><code>sGroup</code> : String<div class="sub-desc">the group of related DragDrop objects</div></li><li><code>config</code> : object<div class="sub-desc">an object containing configurable attributes
Valid properties for DragDrop:
padding, isTarget, maintainOffset, primaryButtonOnly</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code></code></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">DragDrop</td>
    </tr>
        <tr class="method-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.dd.DragDrop-addInvalidHandleClass"></a>
            <b>addInvalidHandleClass</b>(&nbsp;<code>string cssClass</code>&nbsp;) : void            <div class="mdesc">
                        <div class="short">Lets you specify a css class of elements that will not initiate a drag</div>
            <div class="long">
                Lets you specify a css class of elements that will not initiate a drag    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>cssClass</code> : string<div class="sub-desc">the class of the elements you wish to ignore</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>void</code></li>
        </ul>