Abrir el cuadro de diálogo de JQuery Ui en MousePosition

Question

Quiero abrir el cuadro de diálogo de la interfaz de usuario de JQuery en la posición del mouse. ¿cuál es el problema con mi código?

<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

Actualización x y y después de ser aprobada (por valor) a configuración del cuadro de diálogo no tendrá ningún efecto, ya que las variables no están relacionadas después de eso. Tendrá que actualizar la opción de posición directamente como aquí:

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

You can test it out here, o la versión mucho más optimizado (ya que sólo se muestran en la parte superior de #c de todos modos):

$(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

La respuesta de Nick Craver funciona, solo necesita una mejora, para que la caja esté siempre cerca del cursor.

El eje Y debe ser restado por el scrollTop de la página. modo que la línea se convierte en:

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

Answer 3

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

muestra de trabajo: http://jsbin.com/okosi4

Esta solución funcionado mejor para mí cuando tuve una página desde hace tiempo que requiere el desplazamiento. Descubrí que las soluciones anteriores no funcionaban bien con el desplazamiento vertical.

Ver más sobre position option