<droppable>
Prev  Views  Next

<droppable>
A mixin that adds easy drag and drop support to view.

JavaScript: lz.droppable

The <droppable> mixin adds easy drag and drop support to <view>

Example 35. Example of Using Drag and Drop

<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>
edit
Flash
edit
HTML5

droppable is a mixin intended for use with <view> and its subclasses.

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
dragging expression lz.draggable null readonly
  The view that's currently being dragged, or null if none.
dragover expression lz.droppable null readonly
  The view that's been dragged over, or null if none.
droppable boolean Boolean true read/write
  If true, this view accepts drop events.
sourcetypes string String draggable read/write
  Specifies the type(s) of draggable views that are valid. A comma-separated string of classnames.

Methods

validSource()
droppable.validSource(view:lz.draggable);
Tests to see if a draggable view can be dropped here. Can be overridden to provide custom behavior.
Parameter Name Type Description
view:lz.draggable    
Returns Type Description
  Boolean true if the view can be dragged here, otherwise false.

Events

Name Description
ondrop Sent when a view is dragged and dropped on a droppable view

Copyright © 2002-2010 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Prev  Up  Next
<drawview>  Home  <canvas>