Сделать перетаскиваемый элемент внутри только div

Question

Я сделал элемент перетаскиваемым, но он перетаскивает всю страницу, может кто-нибудь, пожалуйста, помогите мне перетащить элемент перетаскивания внутри только данного div.У меня есть div, созданный с помощью jquery, и я не хочу использовать jquery UI.вот мой код ...

var modal_content = '<div class="div_call_12" id="div_call">';
modal_content +='<video id="remote_Video"  class="remote_Video_12"></video>';
modal_content +='<div id="local_div" style="z-index: 1; height:50px; width:66px; position:absolute; left:40%; border:1px solid grey;">';
modal_content += '<video id="localVideo"  class="localVideo_12"   style="height:50px; width:66px;" autoplay></video>';
modal_content += '</div>';
$('#user_model_details').append(modal_content);

$('#localdiv').mousedown(function(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
});