Drag and drop interactions

Is there a way to use drag and drop interactions?

For example: If I drag this element here, this should happen. If I drag that element there, that should happen.

Thanks in advance.

Hi Carlos,

unfortunately we did not come up with a GUI for it, you have to revert to JavaScript. The API is relatively straightforward (see HTML Drag and Drop).

Here a minimal example: you can drag the green cell onto the red or blue cells. The red one inserts a copy of the dragged cell, the blue inserts the dropped cell:

drag.zip (175.3 KB)

Does this help? Since this a broad topic, feel free to describe what you need.

Cheers,

Felix

1 Like

Thanks for your answer.
I am not sure in which fidelity degree is my goal, but optimally, by dragging and dropping these items from one place to another you would change the table besides it.

Like the example above, but now with action on drop. The left column contains various cells (named “red”, “green” and “blue”). We still have two drop-areas (the above one copies, the below one moves the cell). Dropping a cell from the left to one of those drop-areas changes the state of the widget to the right (depending on the name):

drag-2.zip (289.1 KB)

The scripts of the drop-areas got another large-cell: the “result”-cell:

Depending on the dropped cell, we change the state of this cell:

…
	// change the state of the result-cell:
	let draggedCellName = draggedElement.figure.name;

	// find the state according the the dragged cell name:
	let resultState = resultCell.widget.states.find( s => s.name == draggedCellName);

	// change the state of the result-cell:
	at.changeStateOfCell(resultCell, resultState);

:thinking: hopefully this is not too confusing and it only uses a very small part of the API (no drag-enter/leave… we do not check what is droppable etc.)

1 Like

I think I have to learn some JavaScript, to understand this, there is no way around it. It´s not ideal if I just copy it and reuse it without understanding it.
Thanks!

thanks for asking! It should be possible to provide “native”-support, like:

  • a draggable-property (which makes the cell draggable)
  • dragenter, dragover, dragleave, drop-events (like the other events: Mouse over etc.).

But how to specify which kind of cell are droppable? Do we need conditionals? :thinking:

The Javascript capabilities make Antetype very powerful but also a little inaccessible for us folks who don’t script. I have been trying to learn some js and I am actually making some progress but it is a very long process and I don’t really have the time for it. So, anything that you guys can provide in terms of UI for dragging, docking, drag and drop would be absolutely awesome!

Definitely, JavaScript should be the last resort … the problem I always have are the “endless”-use-cases :smiley: . Maybe we should collect common use-cases and see how to support the most important ones …

Well I suppose you have already collected a few of those over the last three or four months :slight_smile:

technically they are different: Interactive drag and this one, sorry for the nitpicking :smiley: , but thank you for the reminder.

Yes, of course they are. Am I right in assuming the the actual drag is the easiest of the lot to implement?
It’s basically there already and very easy to copy and paste. I am using the code snippet everywhere. Another code snippet I am using (even more than this one) is the state change on resize (per-object-break-point). I could absolutely not live without it!

I don´t see the benefit of dragover in comparison with dragenter, but maybe because I just started thinking about this topic. The basic ones for me would be: dragenter, dragleave and drop-events and they would all be interactions you setup at the target. I guess it would be enough for me if it can trigger the basic interactions “change property” “change state” and so on.

The property “draggable” might be a checkbox in the inspector panel “Position”? I think I just need “move”, I don´t need “copy”.

If you want, we can make a webinar. I can prepare a wireframe of how I image it. I might be biased with the one use case that I am working on right now, but maybe we can come up with basic use cases together and a possible solution.

sorry for the delay. Unfortunately currently my time is very limited, do you mind if I contact you later? I am very interested in your input!

Regarding the “dropover”: I this comes from the JavaScript-API. It is only needed if you want to change the appearance while the dragged items are above a cell.

@fizfaz could you use this to reorder items in a linear grid top to bottom and left to right?

yes, but only with some scripting.

Maybe this is enough (harvested from a prototype, it uses jQuery UI sortable to sort a table:

sortable.zip (1023.3 KB)

Awesome! That comes in handy.