Drag & Drop Conditions and Insertions
I'd really like to be able to say "when I drag this object onto these items, do X but when I don't, do Y."
For example, (Condition 1) when I drag an image into area A, insert that image into area A's horizontal layout. (Condition 2) When I drag the same image into Area B instead, insert that into Area B's horizontal layout. (Condition 3) But when I drag it anywhere else, return it to it's original position and insert it into the appropriate container from whence it came.
My current workflow:
Condition (1) Create an On Drag Stop condition for the intended interaction.
Condition (2) Create an On Drag Stop condition for the second interaction.
Condition (3) This gets more complicated. Let me break it down into parts.
(a) First, because I can't find an "Else" style condition for the On Drag Stop, I need to create a kind of catchment area for when users drop the image outside of area A and area B. To do this, I create a dynamic panel ... it takes up the full screen but sits underneath area A and area B. Let's call this dynamic panel the "noDropArea."
(b) When the page is loaded, the noDropArea is hidden.
(c) When the user starts a drag event, the noDropArea is unhidden.
(d) If the user drops the image from area A onto the noDropArea, the image is first moved back to its original position and, second, inserted into area A. Since the drag event is over and we don't need the onDropArea any more, we hide it away again.
(e) I repeat the above for an image moved from area B.
(f) I set a variable called image1container and set it to "A." When it is moved into area B, I set this variable to B. When the image is moved into the noDropArea, the Insert Into action either puts this image into area A or area B, depending on that variable.
This solution works, but it's totally unscalable. You have to have a different variable for every image and set up a new condition for each new area that you want to add. What if I have ten images that I want to be able to drag and drop between five different containers?
I must be doing something wrong. Please can you suggest a workflow?
Hi Sebastian,
go to this link and tell me if you would like to do something like this:
https://www.justinmind.com/usernote/t...
Hi Sebastian,
go to this link and tell me if you would like to do something like this:
https://www.justinmind.com/usernote/t...
Hi Albert,
Yes, that's very close. But I'd also need it to contain a few other boxes in each column so that they could be reordered depending on where the manipulable box was dragged.
Hi Albert,
Yes, that's very close. But I'd also need it to contain a few other boxes in each column so that they could be reordered depending on where the manipulable box was dragged.
Do you have a web example?
Do you have a web example?
Not yet. I'll do one up for you now. Give me a few minutes.
Not yet. I'll do one up for you now. Give me a few minutes.
Okay, so for some reason I can't get this to work any more (my onDropArea interaction kept overriding any other interactions, so I had to remove it). Nevertheless, I'll give you what I have and you might be able to help me finish it off.
https://www.justinmind.com/usernote/p...
This all behaves correctly except when you drag one of the objects outside of either of the two panels. In that situation, I need the object to return to its original position and be inserted back into the panel that it was moved from.
Okay, so for some reason I can't get this to work any more (my onDropArea interaction kept overriding any other interactions, so I had to remove it). Nevertheless, I'll give you what I have and you might be able to help me finish it off.
https://www.justinmind.com/usernote/p...
This all behaves correctly except when you drag one of the objects outside of either of the two panels. In that situation, I need the object to return to its original position and be inserted back into the panel that it was moved from.
Send your vp file to us.
Send your vp file to us.
I have sent this file through via email.
I have sent this file through via email.
I have this exact problem... can someone please recommend a workflow to do this?
I have this exact problem... can someone please recommend a workflow to do this?
All images drop but i want that when i drop the tulip image then the message written between the drop div that you are not able to drop this image and image revert back to drag div.
thanks in advance
All images drop but i want that when i drop the tulip image then the message written between the drop div that you are not able to drop this image and image revert back to drag div.
thanks in advance
So I found this question while looking for it's answer and I didn't find it, but I finally figured it out on my own:
First of all, the object you want to move needs to be in a container so you can return it there if it's moved incorrectly.
CASE A) When the object is dropped into the correct container (I used a table but I guess you could also use a dynamic panel) you should create an action on drag stop to insert the object into the container you dropped it.
CASE B) If the object is dropped anywhere else then you'll need to create an on drag stop action that inserts the object into the container it was originally into under this condition: NOT ([correct container where the object should have been dragged to in the first place] CONTAINS [object]).
I hope I explained myself correctly given English is not my first language and that this helps someone with the same problem I had.
So I found this question while looking for it's answer and I didn't find it, but I finally figured it out on my own:
First of all, the object you want to move needs to be in a container so you can return it there if it's moved incorrectly.
CASE A) When the object is dropped into the correct container (I used a table but I guess you could also use a dynamic panel) you should create an action on drag stop to insert the object into the container you dropped it.
CASE B) If the object is dropped anywhere else then you'll need to create an on drag stop action that inserts the object into the container it was originally into under this condition: NOT ([correct container where the object should have been dragged to in the first place] CONTAINS [object]).
I hope I explained myself correctly given English is not my first language and that this helps someone with the same problem I had.
Replies have been locked on this page!