Jquery Ui Sortable & Contenteditable=true Not Working Together

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_listli{
      border:1px solid red;
      list-style-type:none;
  }

  <ulid="ul_list"><li><spancontenteditable="true">A</span></li><li><spancontenteditable="true">B</span></li><li><spancontenteditable="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();
  });
  

Share

You may like these posts

• 
  How To Detect When A Child-element Of A Contenteditable Div Is Edited Via Keyboard?
• 
  Centering The Placeholder Caret In Contenteditable Element
• 
  Get Caret Html Position In Contenteditable Div
• 
  How To Bind An Td Contenteditable Value To Ng-model