如何通过jQueryUI,jQuery Mobile和iOS中的touchpunch使图像在contenteditable div中排序？

Question

我试图通过jQueryUI,jQuery Mobile和touch punch插件在contenteditable ="true" div中的文本周围拖动图像

我想让图像可以像桌面上的http://jsfiddle.net/xFfYT/1/一样移动文本.图像可以按文本或其他标记移动.

 <div  id="firstpage" data-role="page" class="demo-page">
    <div data-role="content" contenteditable="true" id="sortable">
     <h1 id="sortable"> Make Images Sortable on iOS </h1>   
     <p id="sortable"> This is first picture 
        <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-512.png" />
         and second picture
         <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-icon-set/128/Yahoo_alt_1.png" />
        drag to swap it into text position
     </p>
     <p id="sortable">
        second paragraph
     </p>
     <h2 id="sortable"> Sample need to test on iOS </h2>    

    </div>
</div>

在iOS上使用哪个jQuery Mobile,我使用这个触摸插件来使jQueryUI工作.但是图像只在标签之间移动(交换图像和其他p,h标签).

这个http://jsfiddle.net/RrZnx/1/是可以在iOS模拟器或设备上运行测试的代码.我在可排序的行之前复制触摸打码.

$( document ).on( "pageinit", "[data-role='page'].demo-page", function() {
    $("#sortable").sortable();
});

我知道sortable只能按标签交换元素.交换图像到内联文本可能是桌面上浏览器的功能.

如何在iOS contenteditable div中的标签内移动图像？

有没有更好的方法？

请帮忙!谢谢!

Answer 1

问题可能是 contenteditable 标签在不同的浏览器上会产生完全不同的结果。也许 contenteditable 只是不会被包含的标签继承，因此您必须手动将其添加到其中。

另外，我从未听说过多个对象可以具有相同的 id（据我所知这将被视为无效的 HTML），也许您想使用类选择器。

 <div  id="firstpage" data-role="page" class="demo-page">
    <div data-role="content" contenteditable="true" id="sortable" class="sortable">
     <h1 class="sortable"> Make Images Sortable on iOS </h1>   
     <p class="sortable"> This is first picture 
        <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-512.png" />
         and second picture
         <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-icon-set/128/Yahoo_alt_1.png" />
        drag to swap it into text position
     </p>
     <p class="sortable">
        second paragraph
     </p>
     <h2 class="sortable"> Sample need to test on iOS </h2>    

    </div>
</div>

和

/*$("#sortable").children().each(function(){
     $(this).attr('contentEditable',true);
});*/

$(".sortable").sortable();

[编辑]

我想我已经明白了：

http://jsfiddle.net/RrZnx/3/