Drag and drop questions: accumulator, drag back to original location

Using JavaScript with Hype
1

I am emulating this drag and drop code from a project I found in this forum. Much thanks to the original author :pray:!! I think it may have originated from @h_classen Very well commented. Thank you!

Each time a square is dragged, I am trying to accumulate the values of each square into a variable: accumuLate. The preset values are in array: var squareValue = [100,-100,300,-50,200];

I have create if else logic (starts line 113) to accumulate the square value based on the id I am acquiring from ui.draggable.attr(‘id’) (line 107)
The problem is that, even though the contents of holdId changes(verified by console.logs line 108), the if else always goes to the first (line 114). Its thinking the holdId is ‘drag0’.

  var holdId =  ui.draggable.attr('id');
  console.log('hold Id ' + holdId);
  
  console.log('accumuLate before ' + accumuLate);

  
  if (holdId = 'drag0') {
       console.log(' in drag 0 hold Id ' + holdId);
       console.log(' in drag 0 squareValue[0] ' + squareValue[0]);
       accumuLate = accumuLate + squareValue[0];
   } else if (holdId = 'drag1') {
       console.log(' in drag 1 squareValue[1] ' + squareValue[1]);
       accumuLate = accumuLate + squareValue[1];
  }  else if (holdId = 'drag2') {
       console.log(' in drag 2 squareValue[2] ' + squareValue[2]);
       accumuLate = accumuLate + squareValue[1];
  } else if (holdId = 'drag3') {
       console.log(' in drag 3 squareValue[3] ' + squareValue[3]);
       accumuLate = accumuLate + squareValue[1];
  }   else if (holdId = 'drag4') {
       console.log(' in drag 4 squareValue[4] ' + squareValue[4]);
       accumuLate = accumuLate + squareValue[1];
  };

  1. I need to find another way identify the specific square that is being dragged. How can I do this? Do I use hypeDocument.getElementById() , if so what property should and I use and how would I use it in this context?

  2. Is there a way I can have the squares to get “sucked in” or attached to their designated spots as soon as the square enters the designated drop area - gray area at bottom”?

  3. How can I allow the user to drag a square back if they change their mind?

prototypeTest.zip (249.0 KB)

I want to learn the foundations of this code. I know a little javascript and can mostly find my way around. There is code here that I am not familiar with such as:

    containment: "parent", 
    revert: "invalid"
    drop: handleDrop,  // looks like this runs handleDrop when dropped
    accept: dragElement,
    cursor: "pointer

Where can I learn about the properties .droppable and .draggable?

Where can iI learn about how all this works? Any tutorials or online resources where I can learn about this?

Thanks!

2

i wouldn’t use jquery or any other library for tasks like this. hype essentially offers everything you’ll need.
you may try this: Need your Help with Drag n Drop! …

the example offers a hitcheck (actually for circles, but squares will work fine too), store properties and restore properties. hype itsself has three events when drag occurs: dragStart, dragMove and dragEnd so you’ll be able to manage tasks …

1 Like
3

Thanks Hans! Yes, I agree that not relying on third party technology has its advantages.

I will take a look at your example. I appreciate your feedback.

Aloha!

4

The good thing is that it is not always a single solution. If I understood correctly this is what you need using only the hype tools. To verify if 2 objects are close you must work with the distances between them. regardsarrastresTest.zip (30.4 KB)

2 Likes
5

Thanks Gabriel! I’ll take a look and deconstruct you example. I appreciate your help.

Mahalo!