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:
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)