draggable.lzx

<library>
    <include href="utils/states/dragstate.lzx"/>
    <include href="dragmanager.lzx"/>
    <!-- needed to get the type lz.droppable -->
    <include href="droppable.lzx"/>

    <mixin name="draggable"> 
        <doc>
            <tag name="shortdesc"><text>A mixin that adds easy drag and drop support to view.</text></tag>
            <text>
                <p>The <tagname>draggable</tagname> mixin adds easy drag and drop support to <sgmltag class="element" role="LzView"><view></sgmltag></p>
                <example title="Example of Using Drag and Drop" query-parameters="lzr=swf10"><programlisting>
<canvas width="100%" height="450">
    <!-- can be dragged onto any droppable view -->
    <view with="draggable" width="100" height="100" bgcolor="${this.dragover ? 'red' : 'green'}" opacity="${this.dragging ? .5 : 1}">
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging draggable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover draggable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop draggable', view);
        </handler>
    </view>
    <!-- can only be dragged only onto droppable text -->
    <view with="draggable" destinationtypes="text" y="200" width="100" height="100" bgcolor="${this.dragover ? 'red' : 'green'}" opacity="${this.dragging ? .5 : 1}">
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging draggable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover draggable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop draggable', view);
        </handler>
    </view>
    <!-- can be dragged onto any droppable view -->
    <text with="draggable" y="400" bgcolor="${this.dragover ? 'red' : 'green'}" opacity="${this.dragging ? .5 : 1}">Drag anywhere
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging draggable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover draggable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop draggable', view);
        </handler>
    </text>

    <!-- accepts any draggable view-->
    <view with="droppable" x="200" width="100" height="100" bgcolor="${this.dragging ? 'yellow' : 'orange'}" opacity="${this.dragover ? .5 : 1}">
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging droppable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover droppable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop droppable', view);
        </handler>
    </view>
    <!-- accepts any draggable view-->
    <text with="droppable" x="200" y="200" bgcolor="${this.dragging ? 'yellow' : 'orange'}" opacity="${this.dragover ? .5 : 1}">Drop here
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging droppable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover droppable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop droppable', view);
        </handler>
    </text>

    <!-- only accepts draggable text -->
    <text with="droppable" sourcetypes="text" x="200" y="400" bgcolor="${this.dragging ? 'yellow' : 'orange'}" opacity="${this.dragover ? .5 : 1}">Drop text here
        <handler name="ondragging" args="view:lz.view">
            Debug.info('ondragging droppable', view);
        </handler>
        <handler name="ondragover" args="view:lz.view">
            Debug.info('ondragover droppable', view);
        </handler>
        <handler name="ondrop" args="view:lz.view">
            Debug.info('ondrop droppable', view);
        </handler>
    </text>
</canvas>
</programlisting></example>

                <p><classname>draggable</classname> is a mixin intended for use with <sgmltag class="element" role="LzView"><view></sgmltag> and its subclasses.
                </p>
            </text>
        </doc>

        <!--- If true, this view sends drop events.
              @type Boolean
              @access public
        -->
        <attribute name="draggable" type="boolean" value="true"/>
        <!--- Specifies the type(s) of droppable views that are valid.  A 
              comma-separated string of classnames. 
              @type String
              @access public
        -->
        <attribute name="destinationtypes" type="string" value="droppable"/>
        <!--- @access private -->
        <attribute name="__splitre" value="new RegExp('\\s*,\\s*')"/>
        <!--- @access private -->
        <setter name="destinationtypes" args="destinationtypes">
            
            var out = [],
                classes = destinationtypes.split(this.__splitre);

            this.destinationtypes = destinationtypes;
            for (var i = 0, l = classes.length; i < l; i++) {
                var newclass = lz[classes[i]];
                if (! newclass) {
                    //Debug.warn('no class %w found for %w', classes[i], this);
                    continue
                }
                out.push(newclass);
            }
            this.__classes = out;
            
        </setter>

        <!--- The view that's currently being dragged, or null if none. 
              @type lz.draggable
              @access public
              @keywords readonly
        -->
        <attribute name="dragging" type="expression" value="null"/>
        <!--- The view that's been dragged over, or null if none. 
              @type lz.droppable
              @access public
              @keywords readonly
        -->
        <attribute name="dragover" type="expression" value="null"/>
        <!--- Sent when a view is dragged and dropped on a droppable view -->
        <event name="ondrop"/>

        <!--- Tests to see if a droppable view is a valid destination and can be dragged onto.  Can be
              overridden to provide custom behavior.
              @param lz.droppable view: The view to test
              @return Boolean: true if the view can be dropped onto, otherwise 
              false.
        -->
        <method name="validDestination" args="view:lz.droppable" returns="Boolean">
            
            if (! this.draggable) return false;
            var classes = this.__classes;
            for (var i = 0, l = classes.length; i < l; i++) {
                if (view is classes[i]) {
                    return true;
                }
            }
            return false;
            
        </method>

        <!--- @access private -->
        <dragstate applied="${parent.dragging}"/>
        <!--- @access private -->
        <handler name="onmousedown">
            if (this.draggable) {
                dragmanager.setAttribute('dragging', this);
            }
        </handler>
        <!--- @access private -->
        <handler name="onmouseup">
            if (this.dragging) {
                dragmanager.setAttribute('dragging', null);
            }
        </handler>
    </mixin>
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2011 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->