3 different drag elements for 1 drop field?

Using JavaScript with Hype
21

I looked at this earlier to day and failed to get anything to work.
The main reason is so much is hard coded to deal with one element being dropped.
So went on with my day to come back to it now.

My understanding is that heads must only reset heads and leave tails, body etc. in place and so on for each element.

I imaging this is like an Avatar builder where you can have more than one set of heads/eyes and so on.

Anyway just came back to it and found a hack that works.
in the
function collectDragInitPositions, I have added a line that also adds the type of elements

  hypeDocument.customData.dragElsOrigPositions[el.id].type  = el.dataset.drop;

Then in the extendDragDropJustOneDropAtATime function

I have added the lines ( and moved the setElementProperty code )

const thisIdentyfier = droppedIds[1];
var type_ =hypeDocument.customData.dragElsOrigPositions[thisIdentyfier].type
var targets =  document.querySelectorAll( "[data-drop='" +  type_ +"']" )
console.log(targets)


for (let i = 0; i < targets.length; i++) { 
  var thisEl = targets[i] 
  
  hypeDocument.setElementProperty(thisEl, 'left', hypeDocument.customData.dragElsOrigPositions[thisEl.id].left, 0.3, 'easeinout');
hypeDocument.setElementProperty(thisEl, 'top', hypeDocument.customData.dragElsOrigPositions[thisEl.id].top, 0.3, 'easeinout');
  
}

Surprisingly this worked..

DD_replace 2_mhv1.hype.zip (52.2 KB)

4 Likes
22

MarkHunte,
you did a wonderful work. I'm speechless. You understood exactly the project. I'm reading and reading again the code but it seems quite magic to me :smiley: .
Really grazie, K.

1 Like