Come mostrare il valore del cursore Jquery in più immersioni rilasciate

Question

Sto usando il cursore dell'interfaccia utente jQuery e trascino e rilascia per creare un modo per specificare una valutazione di 100 per ogni div.

Il problema è quando trascino i miei div sul cursore, non so come ottenere il valore per la posizione di ogni div sul cursore. Ecco un plnk + un codice;

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

} 

Spero che qualcuno possa offrire alcuni consigli,

Acclamazioni

(Inoltre, se qualcuno sa perché posso cadere i div al di fuori della barra rating su entrambi i lati, si prega di fammi sapere!)

Answer 1

L'interfaccia utente di Jquery ha una funzione denominata stop e vi è dove si desidera gestire tutti i calcoli come ad esempio:

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

Questo sarà situato qui:

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

Ho fornito dei commenti per ogni linea in modo da capire cosa ho fatto.

Sopra la funzione draggable è necessario definire un'area di contenimento più stretta in quanto tale:

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

Questo consentirà di evitare la draggable venga spostato a sinistra, a destra o sotto il cursore.

Fondamentalmente si prende la posizione dell'oggetto afferrato, si regola per un po 'di offset, si regola per una certa larghezza, si calcola la percentuale e si sostituisce l'html (potrebbe usare anche text()).

Ecco il vostro rifatto plunker: http://plnkr.co/edit/3WSCo77c1cC5uFiYO8bV?p=preview

Documentazione:

Jquery UI

Jquery .find