使用 jQuery 可排序的文本内的可移动标签

Question

我正在尝试创建一个包含不可编辑但可拖动元素的可编辑文本字段。我得到的最接近的是在 "contenteditable" div 上使用 jQuery 可排序。我已经找到了关于图像的工作示例，但没有找到任何其他类型的标签。

<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 标签像 img 标签一样移动 jQuery 可排序，或者这在 jQuery UI 内是不可能的？

Answer 1

似乎是语法错误.each(){ 缺少回调函数.each(function(index, element) {})； .each(function(index, element) {}) 末尾缺少右括号 ) 。此外，尝试在 span 元素

中将 #sortable 内的文本换行

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/

使用 jQuery 可排序的文本内的可移动标签

Movable tags within text using jQuery sortable

javascript

jquery

jquery-ui

jquery-ui-sortable