How to show jquery slider value in multiple fallen divs

Question

I use the jQuery UI slider and drag it to create a way to determine a rating of 100 for each div.

The problem is that I drag my divs onto the slider, I don’t know how to get the value for the position of each div on the slider. Here is the plnk + code:

http://plnkr.co/edit/wSS2gZnSeJrvoBNDK6L3?p=preview

$(init); function init() { var range = 100; var sliderDiv = $('#ratingBar'); sliderDiv.slider({ min: 0, max: range, slide: function(event, ui) { $(".slider-value").html(ui.value); } }); var divs = '.itemContainer' $(divs).draggable({ containment: '#content', cursor: 'move', snap: '#ratingBar', revert: function(event, ui) { $(this).data("uiDraggable").originalPosition = { top: 0, left: 0 }; return !event; } }); var position = sliderDiv.position(), sliderWidth = sliderDiv.width(), minX = position.left, maxX = minX + sliderWidth, tickSize = sliderWidth / range; $('#ratingBar').droppable({ tolerance: 'touch', 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); $(".slider-value").html(ui.value); } } }); $(".slider-value").html(sliderDiv.slider('value')); } 

Hope someone can offer some advice,

Greetings

(Also, if someone knows why I can drop divs outside the rating bar on both sides, please let me know!)

Answer 1

JQuery UI has a function called stop , and where you want to handle all calculations as such:

 stop: function(event, ui) { // Object dragged var e = ui.helper; // Offset of that object var eOffset = e.offset().left; // Sliders offset var sliderOffset = sliderDiv.offset().left; // Subtract their offsets var totalOffset = eOffset - sliderOffset; // Width of box dragged var boxWidth = ui.helper.width(); // Subtract their widths to account for overflow on end var sliderW = sliderDiv.width() - boxWidth; // Get percent moved var percent = totalOffset / sliderW * 100; // Find .slider-value and replace HTML e.find(".slider-value").html(Math.round(percent)); } 

It will be located here:

 $(divs).draggable({ containment: '#content', cursor: 'move', snap: '#ratingBar', revert: function(event, ui) { $(this).data("uiDraggable").originalPosition = { top: 0, left: 0 }; return !event; }, .... <-- HERE }); 

I have provided comments for each line so you understand what I did.

Above your draggable function, you need to define a denser scope of protection:

 var left = sliderDiv.offset().left; var right = left + sliderDiv.width(); var top = sliderDiv.offset().top; var bottom = top + sliderDiv.height(); var height = $(".itemContainer").height(); var width = $(".itemContainer").width(); $(divs).draggable({ containment: [left, 0, right - width, bottom - height], ..... }); 

This will prevent draggable from moving left, right or under the slider.

Basically, you capture the position of the captured object, adjust some offset, adjust for a certain width, calculate the percentage and replace html (you can also use text() ).

Here is your plunker redone: http://plnkr.co/edit/3WSCo77c1cC5uFiYO8bV?p=preview

Documentation:

Jquery user interface

Jquery.find