Draggable cards

advanced-prototyping
newbie-question
#1

Hi everyone!

Can anyone help me replicate this one?
https://preview.keenthemes.com/metronic/demo3/features/cards/draggable.html#

Hope you can give me tips and ideas. Thank you!

#2

Hi, I am not a axure pro yet, but I am currently working on something similar.
you can work with a repeater and create a card within it.
The card should be a dynamic panel to have the drag and drop functionality.
For drag and drop there are several tutorials online if you need further help.
now coming to the detection of the position while dragging. This is where I’m struggling right now.
As product support told me, there is no possibility to have a hover effect while dragging, but I think there is a kind of work around. I hope someone else can help with that specific issue.

#3

Thank you for the tips!

#4

@ame,
A few things for you to check out. In general, this thread has a great solution:

If you need to support dragging only when user clicks then drags from the “hamburger icon” (let’s say it is named, “MyIcon”) then you can set up a conditional case in the Dragged event with a condition like, If cursor is over area of MyIcon or probably better yet, a Mouse Button Down event for MyIcon that sets it to Selected and then in Dragged event (of the dynamic panel to be moved) a condition of, If is selected of MyIcon …and then a Drag Dropped event that sets MyIcon to unselected.

In my opinion, that solution already has a nice hover effect when dragging. It is true you can’t style a dynamic panel with a selected interaction style, but you can style a widget in that dynamic panel. Here is a much earlier version of the same basic approach that I dug up from a few years back. I updated the 3 items page to show how to style the box widget in each of the three dynamic panels with a selected interaction style of a dotted border and partial opacity. It also demonstrates the basics of dragging and reordering a list without the complexities of a repeater (so should be easier to learn and start with, but less flexible, efficient and extensible than a repeater.)

H or V Drag and Drop reorder v3.rp (487.4 KB)

Drag and Drop behavior prototype
#5

Thanks a lot! This could really help me.

#6

@iamable,
I’m not sure I understand all your questions.

If you want to dynamically get the location of a dynamic panel while it is being dragged, you can use the Dragged event. Add an action to Set Text or Set Variable Value to these built-in expressions:

[[This.x]]
[[This.y]]

(and you can also use the built-in properties of .left, .right, .top, .bottom to more easily track when the dynamic panel reaches or exceeds whatever locations needed. You can also set boundaries in the Move action to limit where the dynamic panel can be dragged.

What do you mean by “hover effect while dragging”? “Hover” typically refers to a visual effect shown when the mouse cursor is over something, and what Axure RP9 calls “MouseOver” as an interaction style. So technically, no, you can’t trigger a MouseOver style for a widget behind a dynamic panel that is being dragged/moved. But you can instead trigger the Selected style of that widget if the dynamic panel being dragged is over the area of this widget behind the dynamic panel. Now, if you are referring to a visual style while the widget is being dragged and thus “hovering in front” of the page / other widgets, then that is possible and straightforward. I’ll call this a “drag style” (cue RuPaul, “Work it girl!” :dancer:t5: )

I’ve made a quick prototype to demonstrate the basics of these effects and behaviors:

  • Dynamic panel that drags with a “drag style” and reports its location.
  • A widget’s “hover style” is faked when the dynamic panel is over it by setting it to Selected (then Unselected when not over it.) The widget’s MouseOver and Selected styles are identical to achieve this visual effect.
  • Dynamic panel that drags only when an icon inside it is clicked and dragged.
  • Dynamic panel that snaps to the location of a widget when the drag is released and the dynamic panel is over that widget.

drag examples.rp (71.6 KB)

It also occurs to me that a “drag style” (shown when dragging a card / repeater row item) for the solution posted by pdcdec above is actually already built-in and straightforward to change. Not so obvious because there are lots of nested dynamic panels, but if you can click through the layers of the “dp_ghost” dynamic panel, and/or search for “r_bg_off” in the Outline pane, that is the widget to style to change the look of a hovered/dragged.

#7

@mbc66 thank you, but this is not exactly what I’m struggling with.
I already know this area of widget-xyz is over widget-abc functionality.
But this doesn’t work for items in a repeater.
So I want to drag an item from one list to another and hightlight this item under the dragged item.
I managed to do this with absolut positions but this won’t work with scrollable lists.

#8

If you look into the solution posted by @pdcdec it provides for this. The basic approach would be to test if the area of the dragging widget is over the area of the repeater, and if true, trigger an action for the repeater widget you’d like to change. Moving by (0, 0) or Rotating by 0 degrees are common methods. You could also Fire Event --anything to cause a specific action to happen to that widget in the repeater. Search for the “act_drag” and “mini_row_sensor” widgets in his prototype to see the interaction code.

In general, you can calculate the location of a widget/row in a repeater by starting with the location of the repeater itself (and adding location of any dynamic panels it might be in), then adding a multiple of the height of the row by index, then if needed adding the location of a specific widget in the repeater cell.

#9

Thank you for that approach, but as I saw, this solution is not based on repeaters nested in scrollable dynamic panels, isn’t it?