Pokazuje podpowiedź na ruchomych div nad obrazem

Question

Co mam jest:

1. mam obraz wykresu kołowego przedstawionego
2. Mam mapę obrazu wykresu kołowego
3. domyślną przeglądarkę etykietka jest pokazany na ruch myszy nad obrazem

Co staram się zrobić to:

1. Na wycinek wykresu touchmove przesunąć zielony znacznik (div) po torze kołowym w stosunku do wykresu kołowego

Co chcę osiągnąć:

1. opcję Pokaż domyślna podpowiedź przeglądarki na temat przenoszenia wykresu kołowego div na wykres kołowy
2. Pokaż wartości obszarów ciasta przy przesuwaniu zielonego znacznika (div) wokół obrazu

Jak to osiągnąć?

Niektóre Kod:
Fiddle Link: here

$("img").bind("touchmove",function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 

    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 

    $("#marker").css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 

    // Code to show values of Pie as a tooltip or in a separate div 
}); 

Answer 1

Co ciekawe, problem może być rozwiązany tylko z CSS (uwaga, nie sprawdził, czy to działa w urządzeniu dotykowym, ale to powinno):

area { 
    display:block; 
    position: absolute; 
} 

area:after { 
    background: red; 
    color: white; 
    position: absolute; 
    display: block; 
    white-space: nowrap; 
} 

area:hover:after { 
    content: attr(title); 
} 

Jednakże, jeśli chcesz zachować javascript dla elastyczności nie musisz sprawdzać stanu przeciągania, ponieważ touchmove sugeruje, że palec jest wciśnięty. Nie powinieneś potrzebować zagnieżdżonego zdarzenia ładowania okna (i tak nie uruchamia się w Chrome). To trochę upraszcza kod.

$(document).ready(function(){ 
    var angle=180; 
    var x0, y0; 
    var x, y, x1, y1, drag = 0; 
    var content=$("#content"); 
    var img=$("#myimage"); 
    var imgpos = img.position(); 
    var marker = $("#marker"); 
    var info = $("#info"); 


    $(document).bind('touchmove touchstart',function(e){ 

     e.originalEvent.preventDefault(); 
    }); 

    img.removeAttr("width"); 
    img.removeAttr("height"); 

    x0 = imgpos.left + (img.width()/2); 
    y0 = imgpos.top + (img.height()/2); 

content.on("touchmove mousemove", "map", function(event) { 
    e=event.originalEvent; 
    x1 = e.pageX; 
    y1 = e.pageY; 
    x = x1 - x0; 
    y = y1 - y0; 
    r = 180 - ((180/Math.PI) * Math.atan2(y,x)); 
    marker.css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)'); 
    info.text(event.target.getAttribute('title')); 
}); 

}); 

Widać obie implementacje w akcji tutaj: http://jsfiddle.net/Wz7fF/

Answer 2

Czemu nie używając standardowej biblioteki takie jak HighCharts i niech sobie informacje podpowiedzi, które chcesz pokaz.