Drag n Drop into allowed container

Using JavaScript with Hype
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
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 :smile:

3

Glad to hear you found a solution. Can you share your document to help others?

4

Here is a working solution for dragging and dropping into certain areas.

book1 copy.hype.zip (780.0 KB)

3 Likes
5

@MrAddy - fantastic job!

6

Great Job Mr. Addy!!

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
8

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
9

why is it so hard in comparison to edge animate and flash to do drag and drop

10

Thank you very much for your prototype, it was very helpful.