Переместить div с мышью и его содержимым?

Question

У меня есть Div, который перемещается курсором мыши. В DIV у меня есть 2 ссылки, и я тоже хочу на них нажимать, но Div является подвижным, он перемещается с помощью мыши, поэтому, когда я хочу щелкнуть ссылку (в этом div), DIV перемещается далеко от курсора.

Мой КОД:

<div class="myDiv"> 
    Click to View<br> 
    <a href="#linkA">Link A</a><br> 
    <a href="#linkB">Link B</a> 
</div> 

$(document).bind('mousemove', function(e){ 
    $('.myDiv').css({ 
    left: e.pageX + 50, 
    top: e.pageY 
    }); 
}); 

http://jsfiddle.net/hbd/zo0csLx5/

Answer 1

Извините за мой вид нечитаемый кода, но это может дать вам идею.

var cursorPos = { 
    x: 0, 
    y: 0, 
    offset: 50 
}; 

$(document).bind('mousemove', function(e){ 
    var myDiv = $(".myDiv"), 
     myDivData = { 
     width: myDiv.innerWidth(), 
     height: myDiv.innerHeight(), 
     posX: myDiv.offset().left, 
     posY: myDiv.offset().top, 
     }; 

    // Check if the cursor is out of a given area 
    if (!((e.pageX >= (myDivData.posX - cursorPos.offset) && e.pageX <= (myDivData.posX + myDivData.width + cursorPos.offset)) && 
      (e.pageY >= (myDivData.posY - cursorPos.offset) && e.pageY <= (myDivData.posY + myDivData.height + cursorPos.offset))) 
     ) { 

     // Check if it moved horizontally 
     if (e.pageX > (myDivData.posX + myDivData.width)) { 
      myDiv.css({ 
       left: (e.pageX - myDivData.width - cursorPos.offset), 
      }); 
     } 
     else if (e.pageX < myDivData.posX) 
      myDiv.css({ 
       left: e.pageX + cursorPos.offset, 
      }); 

     // Check if it moved vertically 
     if (e.pageY > (myDivData.posY + myDivData.height)) 
      myDiv.css({ 
       top: (e.pageY - myDivData.height - cursorPos.offset) 
      }); 
     else if (e.pageY < myDivData.posY) 
      myDiv.css({ 
       top: e.pageY + cursorPos.offset 
      }); 

    } 
    cursorPos.x = e.pageX; 
    cursorPos.y = e.pageY; 
}); 

Проверить это demo