Event listener upon dragging element within area


Without having to revamp this code, I want to improve its usability. I’m hoping someone can help.

The decision factors on the top of the interface, when dragged and dropped below are currently snapping to the proper places. I want to improve it so that they snap as soon as the factor is dragged within or anywhere inside the gray drag and drop area. I want them to still snap to the prescribed area but snap there as soon as it is anywhere within the gray area. Currently they need to be dragged close to the prescribed area. When using the finger drag in mobile mode, this can be frustrating therefore diminishing a positive ux.

How can I define the event listener if the factor being dragged to this area, the factor snapping to the prescribed spot when this gray area is entered?

The drag and drop logic is handled by function dragAndDrop(). Run upon scene entry.
Prescribe drop areas are defined by each areas elements id. i.e #drop0

The key function where I think the change should be made is in the function - dragElements.forEach, specifically here in the following jQuery code:

  $(dropElements[index])<a class="attachment" 

  //Tell the droppable element that it should use the call the 
  //`handleDrop` function when an element is dropped over it

  drop: handleDrop,

  //The name of the element that the drop target should accept
  accept: dragElement,

  //Change the mouse icon to a pointing hand when it's over the 
  //draggable element
    cursor: "pointer"

Here the droppable area is established:


It gets it from an array I set up with the id’s of target droppable area.

I tried changing it to hard coding the id of the drop area:


But no luck.

I’ve also tried and event listener within the function:
hypeDocument.getElementById(‘dropArea’).addEventListener(‘hover’, function(),
But that didn’t work either.

Do I have to use one of the hype gesture event listeners like hypeDocument.kHypeGesturePhase…? Is how would I implement here?

@MarkHunte if you have time.


prototypeSample2.zip (1.2 MB)


have a nice day :slight_smile:

1 Like

Thanks Hans-Gred,

You mentioned once a learning resource where I can learn how to create drop/draggable elements. I can’t seem to find it. When you get a chance, can you please resend. Thanks!

dragAndDropHype.hype.zip (23.7 KB)

this is old. but it’s a hypeexample that i surely have offered to you in the past … :slight_smile:

the collissiondetection was just made for circles, but’ll fit your needs i guess …

given an id to an draggable element and a corresponding class to a droppable element … that’s it

Have a sunny day :slight_smile:

1 Like

Much thanks! May the sun shine on you as well! :grin: