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

I'm attempting to create an editable text field with non-editable, yet draggable, elements. The closest I've gotten is using jQuery sortable on a "contenteditable" div. I've found working examples of this with images, but not with any other type of tag.

我正在尝试使用不可编辑但可拖动的元素创建可编辑的文本字段。我最接近的是在“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>

with

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

You can see my example here: http://jsfiddle.net/918smpc3/1/

你可以在这里看到我的例子:http://jsfiddle.net/918smpc3/1/

Is it possible to get the span tag to move like the img tag with jQuery sortable, or is this impossible within jQuery UI?

有没有可能让span标签像img标签一样移动,jQuery可排序,或者这在jQuery UI中是不可能的?

1 个解决方案

#1

Appear to be syntax errors .each(){ missing callback function .each(function(index, element) {}); missing closing parenthesis ) at end of .each(function(index, element) {}) . Also, try wrapping text within #sortable in span elements

似乎是语法错误.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/