javascript - 如何在 iOS 中通过 jQueryUI、jQuery Mobile 和 touchpunch 使图像在 contenteditable div 中可排序？

Question

我尝试通过 jQueryUI、jQuery Mobile 和touch punch plugin 在 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，我用这个touch punch plugin使 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/