How to make images sortable in contenteditable div by jQueryUI, jQuery Mobile and touchpunch in iOS?

Question

I try to drag images around text in contenteditable="true" div by jQueryUI, jQuery Mobile and touch punch plugin

I want to make image can move around text like http://jsfiddle.net/xFfYT/1/ on desktop. Image can move in line of text or other tag.

 <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>

Which jQuery Mobile on iOS, I use this touch punch plugin to make jQueryUI work. But image only move between tag (swap image and to other p, h tag) .

This http://jsfiddle.net/RrZnx/1/ is code you can run test on iOS simulator or device. I copy touch punch code before sortable line.

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

I understand that sortable can only swap element by tag. The swap image to inline text maybe a function of browser on desktop.

How to move image around text inside a tag in iOS contenteditable div?

Is there any better way?

Please help! Thanks!

Answer 1

The problem might be that the contenteditable tag makes completely different things on varying browsers. Maybe the contenteditable just doesn't get inherited by the contained tags, so you'd have to manually add it to them.

Also, i never heard that multiple objects can have the same id (as far as i know this would be considered invalid HTML), maybe you want to use the class selector.

 <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>

and

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

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

[EDIT]

i think i figured it out:

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