Question

我尝试通过jQueryUI，jQuery Mobile和 触摸插件 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/

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

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

还有更好的方法吗？

1 个答案: