Draggable and ondrop - Just like HTML

How-to Discussions
1

Been playing around with fuse and thus far loving every bit of it. I am trying to achieve something like This in fuse and have no clue on how to go about. Please Help

2

Could you explain what that HTML does? I’m trying to drag the yellow blocks and the dark gray one and none of them move.

3

The html example is probably a bad one, but I agree the Dragging API needs more, like:

  • WhileDraggable
  • WhileDragging (Over property, OnBy property)

You could use WhileDragging on elements that are expecting something to be dragged on, and specify the type of Class that its expecting something to be dragged on via Over

<Circle ux:Class="SomeDraggableCircle" Layer="Overlay" ... Color="#0f0">
  <Draggable /> <!-- probably can use this as a trigger instead of WhileDraggable -->
  <WhileDragging>
    <Change Target="this.Color" Value="#f00" />
  </WhileDragging>
  <WhileDragging Over="DraggedOnText">
    <Change Target="this.Color" Value="#f00" />
  </WhileDragging>
</Circle>

<StackPanel>
  <Text ux:Class="DraggedOnText">
   <WhileDragged OnBy="SomeDraggableCircle">
     // do stuff like Move
   </WhileDragged>
   <Dragged>
     // do stuff once drag is done
   </Dragged>
  </Text>

  <DraggedOnText Value="Text 1" />
  <DraggedOnText Value="Text 2" />
  <DraggedOnText Value="Text 3" />
</StackPanel>
  • Dragged (Like Swiped trigger after dragging is finished, same properties as above)
  • Draggable already exist, which makes an Element draggable like Selectable in the new Selection API

And probably lots more that people can think of, but something to allow us to:

  • Drag an element (that’s done)
  • Detect when a draggable element is dragged on
  • Do stuff while being dragged
  • Do stuff while being dragged over Element type

and I’m probably missing more.

4

Fernando Lins wrote:

Could you explain what that HTML does? I’m trying to drag the yellow blocks and the dark gray one and none of them move.

The HTML has been modified. Simply drag the any of the Orange boxes into the dark gray ones.