2017-08-25 73 views
3

我有一些整理和编辑工具,看起来像这些在下面的代码添加:jQuery UI的排序

但如果我点击启用排序第一和启用编辑后,编辑将无法正常工作。

更新:对于那些需要它$('.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>

+2

你试过把$('。content')。enableSelection();在“else if”括号里面? –

+0

现在我做了,它的工作原理。谢谢哥们 –

回答

0

删除$( '内容')disableSelection();功能从你的条件,如果它应该工作正常,不要使用此功能建议在文档中

请按照下面的URL获取更多详细信息。 http://api.jqueryui.com/disableSelection/