So zeigen Sie den Wert des Jquery-Schiebereglers in mehreren abgelegten divs an

Question

Ich benutze den jQuery-UI-Schieberegler und Drag & Drop, um eine Möglichkeit zu erstellen, eine Bewertung von 100 für jedes div anzugeben.

Das Problem ist, wenn ich meine divs auf den Schieberegler ziehen, weiß ich nicht, wie Sie den Wert für die Position jedes div auf dem Schieberegler erhalten. Hier ist ein plnk + irgendein 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')); 

} 

Hoffnung jemand einige Ratschläge anbieten,

Prost

(Auch, wenn jemand weiß, warum ich die div-Tags auf beiden Seiten außerhalb des Bewertungsbalken fallen können, bitte lass es mich wissen!)

Answer 1

Jquery UI hat eine Funktion namens stop und es gibt dort, wo Sie alle Berechnungen behandeln möchten als solche:

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)); 
} 

Das hier befinden wird:

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

Ich habe für jede Zeile zur Verfügung gestellt zu kommentieren, so dass Sie verstehen, was ich tat.

über Ihre draggable Funktion benötigen Sie ein festeren Sperrgebiet als solche zu definieren:

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], 
..... 
}); 

Das die draggable an einer Bewegung nach links verhindern, rechts oder unter dem Schieberegler.

Grundsätzlich greifen Sie die Position des gegriffenen Objekts, stellen Sie für einen gewissen Abstand ein, passen Sie für eine bestimmte Breite an, berechnen Sie den Prozentsatz und ersetzen Sie den HTML-Code (Konnte auch text() verwenden).

Hier ist Ihre Plunker Saniert: http://plnkr.co/edit/3WSCo77c1cC5uFiYO8bV?p=preview

Dokumentation:

Jquery UI

Jquery .find