2017-08-25 168 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/