Otwieranie okna dialogowego JQuery Ui w MousePosition

Question

Chcę otworzyć okno dialogowe interfejsu użytkownika JQuery w pozycji myszy. na czym polega problem z moim kodem?

<script type="text/javascript"> 

    $(document).ready(function() { 
     var x; 
     var y; 
     $(document).mousemove(function (e) { 
      x = e.pageX; 
      y = e.pageY; 
     }); 

     $("#d").dialog({ 
      autoOpen: false, 
      show: "blind", 
      hide: "explode", 
      position: [x, y] 
     }); 
     $("#c").bind("mouseover", function() { 
      $("#d").dialog('open'); // open 
     }); 


     $("#c").bind("mouseleave", function() { 
      $("#d").dialog('close'); // open 
     }); 



    }); 



</script> 

Answer 1

Aktualizacja x i y po ich przeszły (pod względem wartości) do konfiguracji oknie dialogowym nie będzie miał żadnego wpływu, ponieważ zmienne nie są związane z potem. Musisz zaktualizować bezpośrednio opcję pozycji, podobnie jak to:

$(document).mousemove(function (e) { 
    $("#d").dialog("option", { position: [e.pageX, e.pageY] }); 
}); 

You can test it out here lub wersji dużo bardziej zoptymalizowanej (ponieważ tylko pokazać ją na szczycie #c tak):

$(function() { 
    $("#d").dialog({ 
     autoOpen: false, 
     show: "blind", 
     hide: "explode" 
    }); 
    $("#c").hover(function() { 
     $("#d").dialog('open'); 
    }, function() { 
     $("#d").dialog('close'); 
    }).mousemove(function (e) { 
     $("#d").dialog("option", { position: [e.pageX+5, e.pageY+5] }); 
    }); 
}); 

You can test that version here .

Answer 2

Odpowiedź Nicka Cravera wymaga jedynie poprawy, aby pudełko zawsze znajdowało się blisko kursora.

Oś Y należy odjąć od przewijanej strony. Tak, że linia staje się:

$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] }); 

Answer 3

$("#d").dialog(
    "option", 
    { 
     position: 
     { 
      my: 'left', 
      at: 'right', 
      of: event 
     } 
    } 
); 

próbka robocza: http://jsbin.com/okosi4

Rozwiązanie to działało lepiej dla mnie, gdy miałem długą stronę, która wymagała przewijania. Stwierdziłem, że powyższe rozwiązania nie działają dobrze w przypadku przewijania w pionie.

Zobacz więcej o position option