First time drag and drop issue of position in bootstrap modal for ui sortable

user_6212295 0
Viewed 887

I am facing a drag and drop issue for an event executing for the first time. That issue is related to the position of the image when I drag and drop it to another place for the first time.

The issue is shown below. enter image description here

Here is the code :

$(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();
    });
});

For more information. This drag and drop works properly without the modal so please can you any one help to solve this with the bootstrap modal?

Here js fiddle link. https://jsfiddle.net/zrLv0ogj/11/ Please increase the height and width of the output window in jsfiddle.

Jsfiddle Image link. http://prntscr.com/kp1axw

bootstrap-modal jquery-ui-sortable jquery
2 Answers

This works for me.

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

I have got the same problem, it's a bug of jquery who append if you use a "overflow:auto" on a parents div of the sortable. When you load the page and scroll down, if you drag an item, the first time jquery do a wrong calculation of the position "top" of the helper element.

So for me this solution works well, I just refresh the position of the sortable only on the first drag :

var firstDrag= true;
$("ul").sortable(
{
  start: function(e,ui)
  {
    // Refresh position only for first drag
    if(firstDrag)
    {
      $(this).sortable("refreshPositions");
      firstDrag= false;
    }
});

user_59342430
Related