Question

我正在尝试使用不可编辑但可拖动的元素创建可编辑的文本字段。我最接近的是在“contenteditable”div上使用jQuery sortable。我已经找到了带有图像的工作示例，但没有找到任何其他类型的标记。

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

是否可以像使用jQuery可排序的img标签一样移动span标签，或者在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/

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

1 个答案: