使用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/