Впервые проблема перетаскивания позиции в модале начальной загрузки для пользовательского интерфейса

Question

Я столкнулся с проблемой перетаскивания для события, выполняющегося впервые. Эта проблема связана с положением изображения, когда я перетаскиваю его в другое место в первый раз.

Проблема показана ниже.

Вот код:

$(document).on("click", ".make_pdf", function(){
    var url = $(this).attr('url');        
    $('.modal-body').html('Loading...');
    $('.modal-body').load(url,function(result){
        $('#make-pdf').modal({show:true});
        $( this ).children('.user-settings').children('.pdf-list').children('#sortable').sortable();
        $( this ).children('.user-settings').children('.pdf-list').children('#sortable').disableSelection();
    });
});

Для получения дополнительной информации. Это перетаскивание работает должным образом без модального, так что вы можете помочь решить эту проблему с помощью модального бутстрапа?

Здесь js fiddle link. https://jsfiddle.net/zrLv0ogj/11/ Пожалуйста, увеличьте высоту и ширину окна вывода в jsfiddle.

Ссылка на изображение Jsfiddle. http://prntscr.com/kp1axw

Answer 1

Это работает для меня.

$(document)
  .on('mouseup', function() {
    $('.modal').css('overflow', '');
  })
  .on('mousedown', '.ui-sortable-handle', function() {
    $('.modal').css('overflow', 'hidden');
  });