i never did something like this so i was guessing how to do it.
I have to implement a page (html? jquery? php?) with two column. The first column contains elements (a number of squared images) that i want to drag and drop from a column to another. Every element has a value different each from one another, and i want to show to the user the value totally reached summing the values of the squares dropped in the second column.
Just to explain myself: every element in the first column is the image representing a course available in a gym. The user can drag in the second column one or more course, and want to visualize the total monthly cost of the gym, depending on how many and what courses he decided to follow (the ones dragged in the second column).
How can i do a thing like this? I guess i have to use jquery…
jQuery UI’s draggable() will help with that.
If you assign each draggable element a data-cost attribute, you can run calculations on the stop() event to sum the costs of the elements in the second column.
JQuery UI has a bit of an overhead to it – especially if you use the supplied CSS/image files – but you can strip it back quite a bit to only include the stuff you really need.
Sortable() might be even closer to what you need.