Trying to develop a rating system with drag and drop

Trying to develop a rating system with drag and drop

Hello, 

This is my first time using this feature, and I'm afraid I'm a bit lost. I'm trying to develop a solution whereby you can drag 6 divs onto a bar, and depending where you place the item on the bar it will recieve a rating out of 100. Here is an image of what I would like;




So I guess the easiest way for this would be for me to list my problems, and then I can update as I figure them out/someone else kindly offers advice.

1). I'm not sure how to get the .candle (stick) to snap/drop onto the bar. Is there a way to combine the two divs so when I drag the item divs, the bottom of the candle/bar is the part that the snap function recognises?


I was hoping I could attach something like;

  1.     drag: function(event, ui) {
  2.     $(this).closest('.candle').draggable({
  3.       
  4.     });
  5.   },

but I'm not sure if it's possible?

2). I can alert the number of the value, however I'm not sure how to display the value inside the div?

 drop: function (e, ui) { var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2); if (finalMidPosition >= minX && finalMidPosition <= maxX) { var val = Math.round((finalMidPosition - minX) / tickSize); sliderDiv.slider("value", val); alert(val + "%"); } }

Please let me know if you need any more information, and any help will be greatly appreciated!

I'll keep this updated as I progress,

Thanks all


---------------------------------------------------------------

EDIT:

Hi,

I've mostly done everything but I'm struggling to get the value of the position for each div when they are on the slider. I'm also not sure why I can drag my elements to either side of the #ratingBar.

Here is an updated plnk;


Thanks all.