<draggable>
Prev  Views  Next

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

JavaScript: lz.draggable

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

Example 34. 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

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

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
destinationtypes string String droppable read/write
  Specifies the type(s) of droppable views that are valid. A comma-separated string of classnames.
draggable boolean Boolean true read/write
  If true, this view sends drop events.
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.

Methods

validDestination()
draggable.validDestination(view:lz.droppable);
Tests to see if a droppable view is a valid destination and can be dragged onto. Can be overridden to provide custom behavior.
Parameter Name Type Description
view:lz.droppable    
Returns Type Description
  Boolean true if the view can be dropped onto, 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
<cssfonts>  Home  <drawview>