Skip to content Skip to sidebar Skip to footer
Home / Contenteditable / Javascript / Jquery / Jquery Ui

JQuery UI Sortable & Contenteditable=true Not Working Together

Post a Comment
I am creating a list & want to make its item sortable and editable. So i am doing it like this:
  • A

    Solution 1:

    We could make use of the cancel option provided by jquery sortable

    $("#ul_list").sortable({cancel: 'span'});
    #ul_list li{
    border:1px solid red;
    list-style-type:none;
}
    <ul id="ul_list">
<li><span contenteditable="true">A</span></li>
<li><span contenteditable="true">B</span></li>
<li><span contenteditable="true">C</span></li>
</ul>

    Clicking on the text will make it editable. Can be sorted by clicking anywhere else


    Solution 2:

    Finally i did it like this;

    1. On mousedown event i applied the sortable() so that user can sort elements by dragging them,

    2. On click i destroyed the sortable .sortable("destroy"). So now the elements are editable.


    Solution 3:

    I also have the same problem and I fixed by the following code:

    $('#ul_list').on("mousedown",function(){
    $("#ul_list").sortable();
});

You may like these posts

Post a Comment for "JQuery UI Sortable & Contenteditable=true Not Working Together"