JQuery Sortable拖动div，但释放后不排序答案

【问题标题】：JQuery Sortable drags divs, but doesnt sort after releasingJQuery Sortable拖动div，但释放后不排序
【发布时间】：2016-12-04 15:49:32
【问题描述】：

我正在尝试使 div #h_red_printable 中的项目（在页面加载时动态添加，并且有一个类“chart_container”）可排序，但发生的情况是我可以拖动它们，但是当我释放点击，div 回到原来的位置。有什么建议吗？

虚拟 HTML：

   *<div id="printable_charts" style="display:none;height:auto;">

            <div id="printable_hw">
               <img class="banner-img" src="/static/app/ihi/hardware.png" />
              <div id="h_red_printable" class="cat_column">
                  <div class="chart_container"> 
                      <div class=".add_stuff" style="position:absolute;">Stuff here</div>
</div>
              </div>
            </div>
    </div>*

jQuery

$(document).ready(function(){
      $( "#h_red_printable" ).sortable();
    $( "#h_red_printable" ).disableSelection();
});

是的，我已经包含了这两个脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

【问题讨论】：

你能在 jsfiddle 中做一个 sn-p 吗？
你有什么特别的css吗？你能用你的css类展示一下吗？
@keiv.fly 不幸的是我不能，因为 div 里面有很多东西，其中一些是通过需要身份验证的第三方加载的。“chart_container”div 有另一个 div里面有position:relative，并且那个div有很多绝对定位的元素。编辑了代码*。chart_container 还没有定位设置。
另外，什么时候将元素添加到可排序项目列表中？如果在调用 sortable() 后发生这种情况，则需要调用 $('#h_red_printable').sortable('refresh')。
@Jean-FrançoisBeauchamp 他们在页面加载后被添加。所以，我在某个事件触发后调用 ..sortable('refresh') ，或者我只是在 ..sortable() 调用之后添加剪辑？

标签： javascript jquery html user-interface

【解决方案1】：

尝试将内部 div（这里的东西）设置为绝对定位。

 <div class="chart_container">Stuff here</div>

【讨论】：

你添加了“jquery-ui.css”吗？
是的，我已经..尝试重新定位，但仍然没有

【解决方案2】：

由于元素是在单击按钮时添加的，因此在 $("#h_red_printable" ).sortable();被调用时，像这样向该按钮单击事件添加一个事件处理程序，以刷新可排序元素的列表：

$('#theButton').click(function (e) {
   $('#h_red_printable').sortable('refresh');
});

【讨论】：

当然，你要在上面的代码中调整选择器。此外，如果您已经有一个可以访问的点击处理程序，您可以在其中添加您的代码，这样可以更安全地确保在将元素添加到 DOM 之后执行刷新。