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:

• Changelog
• Documentation
• Tests

[ichan-mb]

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

[mortend]

Beautiful. This is great work!