Drag and Drop question


(Ralph) #1

If you look at the attached screenshot I need to create a drag and drop scenerio here.

viewers can drag any of the left side text into any of the right side with the following rules

they need to drag ALL of the leftside text into all the boxes on the right. After this is done the user hits the submit button and the correct order appears on the right.


#2

I don’t see the question! I might be missing it?

Also, if the question is going to be … How do I do this? Then, as a pre-warning, I would suggest a search for drag and drop here. There are plenty of examples. You are going to need JavaScript in order to keep track of what’s being dragged and dropped.


(Ralph) #3

I re wrote it READ BELOW

I need to create a drag and drop with the following scenario below.

Viewers can drag any of the left side text into any of the right side with the following rules

they need to drag ALL of the leftside text into all the boxes on the right. After this is done the user hits the submit button and the correct order appears on the right.


#4

@ralphiedee2016

Below are a few resources to get You going - no single item is complete in itself to answering your question - but together they offer an insight (not necessarily a complete solution) as to how to accomplish your task.

Once You have read this material You will have a better idea of what to search for on the Forum to provide answers to any lingering questions You may have.

“Source” Thread: Sorting exercise : Drag and Drop
Related attachment from this thread: DragandDropWords.hype.zip (20.3 KB)


“Source” Thread: Drag and Drop for simple Quiz
Related attachment from this thread: Spelling App.hype.zip (920.7 KB)


Thread related to your question:


#5

Still don’t see a question :neutral_face:

But, as Jim has said. There are a few examples here on the forum and I would suggest looking at those to learn about how drag (and ultimately drop) works within Hype.

Hype has an API that you can use to record the positions of elements that you are dragging and events on which stage the drag is at.

"start"
"move"
"end"

for example

if(event["hypeGesturePhase"] === "start"){
    // do something like
    record(element.start.position); // pseudo code (not real code)
}
if(event["hypeGesturePhase"] === "end"){
    // pseudo code (not real code)
    record(element.end.position); 
    if(end.position === myTargetPosition){
        // do something else
   }
}

This is the logic of what’s needed but there is a lot more that goes into it. You will find that some of the examples will use this same logic.


#6

…hopefully the responses have been informative. :sunglasses:


(Ralph) #7

Hmm, the job Im about to embark on requires a little bit more than the samples you guys provided ( thank you by the way).

What I did was open the original .swf of the file I need to re create and used a screencapture video to show how it works, tried to upload it is 25.3 mb It shows it uploads but I do not see the attachment, any help?


#8

Uploads here have to be less than 3MB. You would be better off using something like a transfer service or dropbox. Or upload to youtube and share the URL here. :wink:


(Ralph) #9

Here is a dropbox link to a screencast I did of one of the swf modules I’m narrating it so it should be easy to understand, any help in getting this re do of the drag and drop to be done in Hype ?

thx
https://www.dropbox.com/s/2uz66aqaoonprxw/DragDropSampleThs.mp4?dl=0


#10

Actually these samples are instructive on how drag’n drop can work in the Hype environment. Your situation will likely work on the same principles. You absolutely will need JavaScript to make this type of effect happen.

Below is a drag’n drop discussion on this Forum - all worth reading - but in particular I want to highlight the reply from @rene - a demo of putting clothes on a doll - similar to Mr. Wolf in your example. This reply is from 2015 when the Forum had a higher allowance for uploaded file size (6.9 MB for this ZIP file - compared to the current limit of 3 MB).

The file You want to examine is “kokeshi.hype.zip”.


(Ralph) #11

thanks so much looking thru now. R