Draggable Enhancement

[ichan-mb]

• Refactor Draggable using IGesture System. Credit to @egonyans
• Introduce Translation property to Draggable to track translation position when the user drags a visual with Dragabble behavior attached. Credit to @egonyans
• Introduce two new Triggers:
  • DragStarted Pulse when dragging activity has been started
  • DragEnded Pulse when dragging activity has been ended
• Drag and Drop API. Experimental support for drag and drop between visual elements. Introduce sets of Triggers:
  • WhileDraggingOver Activated when Visual that contains Draggable behavior and WhileDraggingOver trigger is overlapped/intersected with the Target Visual property that is defined in WhileDraggingOver
  • WhileDroppingBy Activated when Visual that contain WhileDroppingBy trigger being overlapped/intersected by Source Draggable Visual
  • Dropped Pulse when Draggable Visual is being dropped to the target visual and vice versa. Optionally you can send and receive data.

Example of Drag & Drop:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var dataToTransfer = new Observable("Data to transfer");
        module.exports = { dataToTransfer, dataReceived: function (args) { console.dir(args.data.value); } }
    </JavaScript>
    <ClientPanel>
        <Panel ux:Name="source" X="140" Y="80" Size="80">
            <Rectangle Layer="Background" Color="#afa" ux:Name="bg" />
            <Draggable />
            <Shadow Distance="0" Size="0" ux:Name="shadow" />
            <WhilePressed>
                <Scale Vector="1.2" Duration="0.2" />
                <Change shadow.Size="5" Duration="0.2" />
                <Change shadow.Distance="3" Duration="0.2" />
                <Change shadow.Color="#666" Duration="0.1" />
            </WhilePressed>
            <WhileDragging>
                <Change shadow.Size="10" Duration="0.1" />
                <Change shadow.Distance="6" Duration="0.1" />
                <Change shadow.Color="#333" Duration="0.1" />
                <Change source.ZOffset="2" />
            </WhileDragging>
            <WhileDraggingOver Target="dropPanel">
                <Change bg.Color="#0f0" />
                <Change bg.StrokeWidth="2" Duration="0.2" />
                <Change bg.StrokeColor="#f00" Duration="0.2" />
            </WhileDraggingOver>
            <WhileDraggingOver Target="dropPanel" Invert="True">
                <Set source.Size="80" />
            </WhileDraggingOver>
            <Dropped To="dropPanel" Data="{dataToTransfer}" TargetMissAction="Return">
                <Set source.Size="50" />
            </Dropped>
        </Panel>

        <Panel Size="80" X="80" Y="500" Color="#ccc" ux:Name="dropPanel">
            <WhileDroppingBy Source="source">
                <Change dropPanel.Color="#0ff" Duration="0.2" />
            </WhileDroppingBy>
            <Dropped By="source" Handler="{dataReceived}">
                <Scale Vector="1.2" Duration="0.2" />
            </Dropped>
        </Panel>
    </ClientPanel>
</App>

This PR contains:

• [x] Changelog
• [x] Documentation
• [ ] Tests

[ichan-mb]

Hold on!, I have some refactoring to do to implement one more feature