第一次在引导模式中拖放位置问题，用于 ui 可排序答案

【问题标题】：First time drag and drop issue of position in bootstrap modal for ui sortable第一次在引导模式中拖放位置问题，用于 ui 可排序
【发布时间】：2019-02-06 03:33:46
【问题描述】：

我面临第一次执行的事件的拖放问题。该问题与我第一次将图像拖放到另一个位置时的位置有关。

问题如下所示。

代码如下：

$(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 链接。 https://jsfiddle.net/zrLv0ogj/11/ 请在jsfiddle中增加输出窗口的高度和宽度。

Jsfiddle 图片链接。 http://prntscr.com/kp1axw

【问题讨论】：

请为您的问题创建一个简单的小提琴，我们无法看到任何代码...
好的，我已经添加了jsfiddle.net/bhavin1/zrLv0ogj，请检查此链接，为了解决问题，您必须在 jsfiddle 中增加输出窗口的高度和宽度。

标签： jquery bootstrap-modal jquery-ui-sortable

【解决方案1】：

这对我有用。

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

【讨论】：

【解决方案2】：

我也遇到了同样的问题，如果您在可排序的父 div 上使用“overflow:auto”，这是 jquery 的一个错误。当您加载页面并向下滚动时，如果您拖动一个项目，jquery 第一次会错误地计算辅助元素的位置“顶部”。

所以对我来说这个解决方案效果很好，我只在第一次拖动时刷新可排序的位置：

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

【讨论】：