jquery - 如何拖动多模式？

Question

点击灰色标题上的li可以弹出多个模态框。我想拖动我想要的模态，但是在这个 fiddle 中 https://jsfiddle.net/jz2cqvyn/3/我只能拖动最后弹出的模态。我怎样才能做到呢？

$(document).ready(function(){

  $('li').click(function() {
    id = $(this).attr('id');
    imgsrc = $(this).children('img').attr('src');

    modaldiv = $('.modalExample').html();
    modaldiv = modaldiv.replace("myModal", "myModal_"+id);
    modaldiv = modaldiv.replace("fakimg", imgsrc);
    $('.area').append(modaldiv);

    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
      $('.modal-dialog').css({
        top: 200,
        left: 0
      });
    }

    $('#myModal_'+id).modal({
      backdrop: false,
      show: true
    });

    $('.modal-dialog').draggable({
      handle: ".modal-body"
    });
  });
});

Answer 1

这是一个很好的问题。我想我解决了。您所需要做的就是使后面的模态窗口可点击。休息就好。

尝试下面的代码。检查我在底部添加的 1 行。让我知道这是否有效。

$('li').click(function() {
    id = $(this).attr('id');
    imgsrc = $(this).children('img').attr('src');

    modaldiv = $('.modalExample').html();
    modaldiv = modaldiv.replace("myModal", "myModal_"+id);
    modaldiv = modaldiv.replace("fakimg", imgsrc);
    $('.area').append(modaldiv);

    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
      $('.modal-dialog').css({
        top: 200,
        left: 0
      });
    }

    //$('#myModal').modal({
    $('#myModal_'+id).modal({
      backdrop: false,
      show: true
    });

    $('.modal-dialog').draggable({
      handle: ".modal-body"
    });

   // To make behind elements clickable
   $('.modal-open .modal.in').css( 'pointer-events', 'none' );
   $('.modal-open .modal.in .modal-dialog').css( 'pointer-events', 'all' );

  });

编辑:抱歉，那是我的错，我以为你使用的是 bootstrap 4。但它是 3.3。所以我再次进行了更改，现在尝试上面的代码。