Javascript moving child при перетаскивании на родителя

Question

Я хочу переместить дочерний элемент при перетаскивании по родительскому элементу и самому элементу, а родительский элемент не должен перемещаться.
вот мой demo
Как и в демоверсии, я хочу переместить красную рамку, когда она перетащит на нее или перетащит ее родительский (фон), но я не смог вычислить правильную позицию, не могли бы вы мне помочь?
Другой вопрос, почему я не могу offmousemove event, когда я установил .off('mousemove', mousemove')
Большое спасибо

Answer 1

Я сделал некоторые изменения. Это работает;)

DEMO

$(function(){ 
    var graph = $('.graph')[0]; 
    var parent = $(graph).parent(); 

    var lockX = 0; 
    var lockY = 0; 

    var mousemove = function(e){ 
     $(graph).offset({ 
      top: e.pageY + lockY, 
      left: e.pageX + lockX 
     }); 
    }; 

    parent.on('mousedown', function(e) { 
     lockY = $(graph).offset().top - e.pageY; 
     lockX = $(graph).offset().left - e.pageX; 

     $(this).addClass('draggable') 
      .on('mousemove', mousemove) 
      .on('mouseup', function(){ 
      $(this).off('mousemove', mousemove) 
     }) 

     event.preventDefault() 
    }); 

    $('.graph').parent().on('mouseup', function(e) { 
     $('.draggable') 
      .off('mousemove', mousemove) 
      .removeClass('draggable'); 
    }); 
}); 

EDIT

Единственное фактическое изменение, которое я сделал, чтобы сделать его работа:

.offset({ 
    // instead of: e.pageY - $('.draggable').outerHeight()/2 + dtop 
    top: e.pageY + dtop, 

    // instead of: e.pageX - $('.draggable').outerWidth()/2 + dleft 
    left: e.pageX + dleft 
}) 

PS: В примере в JS Fiddle I изменил dleft и dtop соответственно на lockX и lockY. Конечно, это чистая семантическая вещь.