MrAddy
(Andrew)
March 24, 2015, 12:11pm
1
What is the best approach to drag and drop, jQuery UI or Hypes own API
I want to have it so a certain rect can only go into a certain container
$('#'+element.id).draggable();
$('#answerBox_' + element.id.substr(element.id.indexOf('_') + 1, 1)).droppable({
accept: '#box_' + element.id.substr(element.id.indexOf('_') + 1, 1),
drop: function() { console.log('dropped'); }
});
The draggable is called #box_ and the container is called answerBox_
I think i may have set the rect wrong in Hypes UI under on Drag, but i cannot see any tutorial on it?
The code above to me, should allow box_M to fit in answerBox_M but i cannot make it happen ?
1 Like
MrAddy
(Andrew)
March 24, 2015, 1:45pm
2
var letter = document.getElementById('box_' + element.id.substr(element.id.indexOf('_') + 1, 1));
var home = document.getElementById('answerBox_' + element.id.substr(element.id.indexOf('_') + 1, 1));
letterC = letter.getBoundingClientRect();
homeC = home.getBoundingClientRect();
console.log
if(Math.abs(letterC.left - homeC.left) <= 50 && Math.abs(letterC.top - homeC.top ) <= 50) {
//console.log(letter.id + ' close enough');
hypeDocument.startTimelineNamed('letter_'+element.id.substr(element.id.indexOf('_') + 1, 1), hypeDocument.kDirectionForward)
} else {
//console.log(letter.id + ' Not close enough');
letterC.top = '100';
}
Managed to do this using the above code.
Just need it to so if the container is filled on drop, it jumps back to the first position
Daniel
March 24, 2015, 8:43pm
3
Glad to hear you found a solution. Can you share your document to help others?
MrAddy
(Andrew)
April 10, 2015, 8:12am
4
Here is a working solution for dragging and dropping into certain areas.
book1 copy.hype.zip (780.0 KB)
3 Likes
markus
(Markus Bjerre)
April 27, 2015, 10:36am
7
Wow, awesome Andrew! You should add a function (because I have no idea on how) that makes the symbol jump back to “initial” if the placement is wrong. Therefor the jump back to original position won’t count as a movement.
1 Like
Mr Daddy. Your game word as two problems, one with the drag, suddenly it doesn’t allow to dragg anymore. the other is the posibly of selecting the letrers that are hidden.
thank you for your work
I did this, a dragg and drop prototype.DragAndDrop_experience.zip (19.0 KB) I don’t know if help anyone.
4 Likes
menjli
(aymen)
December 26, 2015, 11:07pm
9
why is it so hard in comparison to edge animate and flash to do drag and drop
danieldamb
(Daniel Martínez)
June 7, 2018, 7:35pm
10
Thank you very much for your prototype, it was very helpful.