Hi there,
is it generally possible to generate a drop field for three different drag elements? That the drag elements are swapped and returned to their starting point as soon as a new drag lands in the drop field. And this only with JavaScript, without timeline animations.
But I’m not sure if a combination would work with this script, because I currently have two drop fields for one drag element and I would like to have one dropfield for 3 elements only accepting one at the time returning the other based on the coordinates it has been on its startposition.
This solution is on top of the draganddropenabler-script.
To make it work the script needed a small change to make the solved puzzle-pieces avaiable in hypeDocument.customData.solvedPuzzlePieses …
read the comments in the script to see how it works.
Hope it’ll work (for sure improveable )
function collectDragInitPositions(hypeDocument, element, event) {
//Object to hold the initial positions of the draggable elements
hypeDocument.customData.dragElsOrigPositions = {};
//array holding the draggable elements
const dragEls = [... element.querySelectorAll("[data-drag]")];
//fill the above mentioned array with top/left positions
dragEls.forEach(function(el){
const leftPos = hypeDocument.getElementProperty(el, 'left');
const topPos = hypeDocument.getElementProperty(el, 'top');
hypeDocument.customData.dragElsOrigPositions[el.id] = {};
hypeDocument.customData.dragElsOrigPositions[el.id].left = leftPos;
hypeDocument.customData.dragElsOrigPositions[el.id].top = topPos;
})
}
function extendDragDropJustOneDropAtATime(hypeDocument, element, event) {
//is it our custombehaviour that triggerd this event?
if(event.customBehaviorName === "checkApple"){
//get arr from the set resolved by the extension ...
const droppedIds = [... hypeDocument.customData.solvedPuzzlePieses];
//set the price. the draggable element holds it as a data-attribute
hypeDocument.getElementById('price').innerHTML = hypeDocument.getElementById(droppedIds[droppedIds.length-1]).dataset.price;
//is there a second apple in the shoppingbag, then put it out
if(droppedIds.length > 1){
//the first entry is the outdated one
const identyfier = droppedIds[0];
//get the element
const el = hypeDocument.getElementById(identyfier);
//reset its position
hypeDocument.setElementProperty(el, 'left', hypeDocument.customData.dragElsOrigPositions[identyfier].left, 0.3, 'easeinout');
hypeDocument.setElementProperty(el, 'top', hypeDocument.customData.dragElsOrigPositions[identyfier].top, 0.3, 'easeinout');
//delete id from the set
hypeDocument.customData.solvedPuzzlePieses.delete(identyfier);
};
}
return true;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeTriggerCustomBehavior", "callback":extendDragDropJustOneDropAtATime});
window.HYPE_eventListeners.push({"type":"HypeScenePrepareForDisplay", "callback":collectDragInitPositions});
Is it also possible to do a second drag and drop function in the same hype? These separate from each other. So if id 4.apple meets the shopping bag 2, that it has no influence on the upper drag and drop function. Thanks a lot!!!
Yesterday I worked on this hype (DragAndDropExtended) all day long… And of course I read all the Javascript articles. Now the Javascript HypeDragAndDropEnabler makes me insecure. Does this also have to be edited like the script in the hype head? Would be very grateful for this tip.
I would place a feature request for that @jonathan@Daniel ! Drag and drop is gaining in popularity and use cases are growing. Especially designers with no js coding experience would be thankful to have a visual implementation of this great engaging feature built-in in hype for designing educational drag-n-drop online games.
the script enables drag and drop functionality without the need to script.
it’s got even some non-coding-logic-possibility using the data-onpuzzlesolved which checks if all draggable elements have been placed …
the executed custumbehaviours offer the possibility to add responses <- here is also set up for your own scripting logic for more advanced use cases
your case seems to need this scripted addition. in fact i’m not 100% sure what you’re trying to achieve and that’s why i advised to learn js … for you to be independend!
///////
in detail:
If you like to use the HypeDragAndDropEnabler, then the way to go will be to rely on its functionality. This means working with custombehaviours and the set hypeDocument.customData.solvedPuzzlePieses (uhh, i really wrote pieses instead of pieces in the script). Hypes messaging system dispatches the custombehaviour-events. (a nice overview -> https://github.com/worldoptimizer/HypeCookBook/wiki/Hype-Events). The common way to act on those events is to write the code to the documents head. (implementation is also described in Hypes documentation)
So let’s say you’ve added the data-attribute data-dropcustombehavior to a dropfield. Than hype will forward a custombehaviour-event whose event.customBehaviorName will be the value of the attribute.
Now the script in the head can check this and act … you know the element that triggered the event and the above mentioned set holds the ids of the elements that have been dropped. That should be enough info for a logical decision to get it go …
///////////////////////////
this won’t be an very easy task and you probably won’t know enough about js in one day …
////////////////////////
any other solution will be possible, but’ll always rely on custom scripting …
@Ed_Sager you’re right, but please consider that a pure drag and drop functionality won’t solve the issues coming up to implement logical decisions on those drag and drops … there are so many custom use cases. you can not cover them all …
Yes - we’d definitely like to “off the shelf” have ways to detect dropping and collisions, but ultimately there will need to be logic to decide what to do with it.
@Ed_Sager Yes this would be fantastic. I am a designer student and have litle experience with JavaScript. This would make things a lot easier for me. Of course it always depends on the application, but it would be a great help for all designers.
Ps: I still try to solve the riddle from this post so I can go on in my project but I feel miles away …
I am stuck and have to admit in the end that I am “only” a desiger. What I tried to program was for nothing. Now I ask if someone could make me an offer to solve this little problem (for a programmer)? I am very thankful for every offer, because I would like to have this great function in my project.
At the moment when I drag for example the head1 element on its drop it's rejecting the other elements just dragged and that's because I have a "checkApple" custombehavior for everything.
Can you suggest me the way to change the initial script to allow every set can stay in its place eventually with 3 custombehaviors? Thanks in advance.
I guess I don't quite understand the behavior you want - if you do not want the pieces to get rejected out, just remove the "checkApple" behavior/listener code, since this is what is only allowing a single piece at a time.
Can you maybe give a few steps as explicit actions on what you want to happen and for which dropzone?