9

我尝试通过 jQueryUI、jQuery Mobile 和触摸打孔插件在 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中的标签内移动图像？

有没有更好的办法？

请帮忙！谢谢！

4

1 回答 1

2

问题可能是 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/

于 2013-08-27T07:16:33.777 回答