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

<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>

$("#ul_list").sortable();

/

But if i use jquery ui sortable then my list item is losing focus for editing and that's why i am not able to edit them.

So please suggest how can i do this?

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

<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>

$("#ul_list").sortable();

http://jsfiddle/7jzVa/

But if i use jquery ui sortable then my list item is losing focus for editing and that's why i am not able to edit them.

So please suggest how can i do this?

• javascript
• jquery
• jquery-ui
• contenteditable

Share Improve this question Follow asked Sep 27, 2013 at 21:01 PeeyushPeeyush 4,8681717 gold badges6666 silver badges9292 bronze badges 1

• stackoverflow./questions/2995329/… gives a good solution~ – CoolGuy Commented Jan 17, 2014 at 2:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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.

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

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