javascript - Jquery ui 可排序

Question

我有一些排序和编辑工具，看起来像下面的代码中添加的:

但是，如果我先单击“启用排序”，然后再单击“启用编辑”，则编辑将无法进行。

更新:对于那些需要它的人，添加了 $('.content').enableSelection(); 并且它可以工作。

$(document).ready(function(){
  $(document).on('click','ul>li',function(){
    var id = $(this).attr('id');
    if(id=="enables"){
      $('.part>span').attr('contenteditable','false');
      $('.content').sortable({
        containment: "parent"
      });
      $('.content').disableSelection();
    }else if(id=="enablee"){
      $('.content').sortable("destroy");
      $('.part>span').attr('contenteditable','true');
      $('.content').enableSelection();
    }
  });
});

.content{
  width: 500px;
  height: auto;
  float: left;
  overflow: hidden;
}
.part{
  width: 100%;
  height: 50px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
  <div class="part" style="background:red"><span>ssssssssss</span></div>
  <div class="part" style="background:blue"><span>sssssss</span></div>
  <div class="part" style="background:green"><span>ssssss</span></div>
  <div class="part" style="background:yellow"><span>ssssss</span></div>
</div>
<ul>
  <li id="enables">Enable sorting</li>
  <li id="enablee">Enable editing</li>
</ul>

Answer 1

删除$('.content').disableSelection();函数从你的 if 条件应该可以正常工作，不要按照文档中的建议使用此函数

请关注以下网址了解更多详情。 http://api.jqueryui.com/disableSelection/