How to make a draggable calculator

[vrielsdenies]

Hello! 

 

I was wondering if it's possible to make a draggable calculator. 

In my pen, you see some blocks with a number. What I'm trying to achieve, is that if you drag a numbered block inside the square, that the number on the block is added to the price, and when you drag a block outside of the square, that the number is subtracted from the price. 

What would be the best way to approach this? 

Many thanks for your help! 

See the Pen PoWYpZz by Vrielsdenies (@Vrielsdenies) on CodePen

[iDad5]

It surely is possible. I think you havemade  already a good start.

 

For a starting point and to keep it simple:

 

Have a variable somewhere that starts add zero :-)

 

I'd work with Draggable.startDrag() and check with hitTest if the drag started inside or outside.

on dragEnd() check if ist gone from outside to inside, then add the value of the box to said variable. If it's gone from isnde to outside substract the box-value from the sum total in all other cases do nothing.

 

Display the value of the sum

 

(You need to find the value of the box, that can be done by reading it's <text>, but it would probably be saver to store the value in a more concise way elswhere)

 

Does that help?

Generally I would try to keep the data separated from the presentation as much as possible.

[vrielsdenies]

hi iDad5, thanks a lot for your reply! I'll have a go at it this week  

Thanks again for your time! 

[iDad5]

You are very welcome. 

 

btw: that project of yours' reminds me very much of a lesson I once held (when dinosaurs and Flash were still around). Our 'box' was a plain pizza and our 'Draggables ' were onions, mushrooms, peperoni etc. each had it's price and we calculated the price of the pizza.

Was a lot of fun and even those student that were slightly challenged in the 'arts department' managed to  get cool looking hot pizzas...

[Alexander Richter]

And this is a really cool idea. I think I might even try to do it myself. Thanks for the helpful tips

[vrielsdenies]

hi iDad5, It took a little longer, but it's getting there thanks to your help so far 

See 

 

It's working now and then, but not all the time, and I'm not sure if I made a mistake in gsap, or if it's just my mediocre javascript skills 😅 (or both).

 

I gave every box data-num attribute, and onDragEnd, I'm looking for the value of this data-num attribute and add or subtract it from the price. This works most of the times, but when you keep dragging the boxes in and out, eventually you'll run into the following error:

 

pen.js:21 Uncaught TypeError: Cannot read property 'value' of undefined
    at Draggable.onDragEnd (pen.js:21)
    at Ma (Draggable.min.js:10)
    at HTMLDocument.onRelease (Draggable.min.js:10)

 

So sometimes the value of the attribute is undefined. 

Do you perhaps have any idea how I could improve the code so it keeps working? 

Many thanks!

 

[GreenSock]

That's probably because the event.target may not always be what you expect. Sometimes browsers dispatch a pointercancel or touchcancel event which has to force the drag to stop, and the target could be something other than the thing dragging. You should just put conditional logic in there to work around that (only run your code if e.target.attributes['data-num'] exists). 

[vrielsdenies]

Thanks GreenSock, I'll give this a try!

[vrielsdenies]

Thanks guys for your help. What I found out was the case, that if you started dragging on the square, everything went fine. But when you started dragging on the text on the square, the error occurred. I have changed this now and it seems to work