使用jQuery排序的文本中的可移動標籤

Question

我試圖創建一個帶有不可編輯但可拖動元素的可編輯文本字段。我得到的最接近的是使用jQuery排序在「contenteditable」div上。我已經找到了與圖像有關的工作示例，但沒有找到任何其他類型的標籤。

<div contenteditable="true" data-role="content" id="sortable"> 
    <div class="sortable"> 
    <img src="http://i.imgur.com/OwriT5v.png"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis justo id elit ultrices quis ultricies ante lobortis. Fusce placerat, ante quis molestie elementum, erat mi porttitor augue, eget iaculis eros metus nec libero. Vivamus consectetur est enim. Donec a orci egestas lacus porttitor 
    <span class="tag" contenteditable="false">I want to move this</span> 
    venenatis volutpat ut sem. Proin aliquet urna elementum sem tempor quis luctus arcu faucibus. 
    </div> 
</div> 

與

$("#sortable").sortable(); 
$("#sortable").children().each(){ 
    $(this).sortable({ 
    connectWidth:"#sortable" 
    }); 
} 

你可以在這裏看到我的例子： http://jsfiddle.net/918smpc3/1/

是否有可能得到span標記移動像jQuery的排序img標籤，或這是不可能的在jQuery UI？

Answer 1

看起來是語法錯誤.each(){缺少回調函數.each(function(index, element) {});在.each(function(index, element) {})的末尾丟失右括號)。另外，嘗試文本換行內#sortable在span元素

JS

$("#sortable").sortable(); 
$("#sortable").children().each(function() { 
    $(this).sortable({ 
     connectWith:"#sortable" 
    }); 
}) 

HTML

<div contenteditable="true" data-role="content" id="sortable"> 
    <div class="sortable"> 
     <img src="http://i.imgur.com/OwriT5v.png"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis justo id elit ultrices quis ultricies ante lobortis. Fusce placerat, ante quis molestie elementum, erat mi porttitor augue, eget iaculis eros metus nec libero. Vivamus consectetur est enim. Donec a orci egestas lacus porttitor</span> 
     <div class="tag" contenteditable="false">I want to move this</div> <span>venenatis volutpat ut sem. Proin aliquet urna elementum sem tempor quis luctus arcu faucibus.</span> 

    </div> 
</div> 

的jsfiddle http://jsfiddle.net/918smpc3/2/