3 different drag elements for 1 drop field?

Using JavaScript with Hype
6

DragAndDropExtended.hype.zip (23.0 KB)

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 :slight_smile: (for sure improveable :wink: )

 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});
4 Likes