LFC-$177.lzx

<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>