Question

我正在尝试制作div #h_red_printable中的项目（在页面加载时动态添加，并且有一个类＆＃34; chart_container＆＃34;）可排序，但是我可以拖动它们，但当我释放咔嗒声时，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>

Answer 1

尝试将内部div（此处为Stuff）设置为绝对定位。

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

Answer 2

由于元素是在按钮上单击添加的，因此在$（“＃h_red_printable”）之后添加.sortable（）;调用，为这个按钮点击事件添加一个事件处理程序，以刷新可排序元素列表：

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

JQuery Sortable拖拽div，但在发布

2 个答案: