Question

I am currently designing an inline text editor. Users will have the ability to drag and drop images into the editor anywhere they want.

The editor is entirely iFrame based, heavily relying on nested divs for styling and formatting. Now if I the user drags the image into the middle of the content and drops it there, I want that the content above the drop zone be packaged into one div, the image being placed below it, and the content below the drop zone packaged into another div and placed below the image.

But I have no idea how to split a div into two parts based on co-ordinates (which can be obtained from the jQuery drop handler). Can anyone give me an idea on how to do it?

Answer 1

I think i get the gist of what you are trying to do and i made a short script to demonstrate one possibilty. I split the text into one div per character, and make those divs sortable so i can drag and drop position my image in the middle of the text

HTML

<span class="sortable">
       <img id="image" src="https://si0.twimg.com/profile_images/1842775519/profile_normal.png" />
        <input type="text" size="1" id="tb"/>
</span>

Javascript

$(function () {
    $(".sortable").sortable();  //Makes panel sortable (needs jquery and jquery UI)
    $("#tb").keyup(function () { //binds keyup event on the input box
        $('<div>' + $(this).val() + '</div>').insertBefore(this);  //adds the input box value to a new div and inserts it into the DOM before the input box itself
        $(this).val(''); // empties the input
    });
});

CSS

* {
    float:left
}
.sortable {
    border: solid 1px black;
    width:200px;
    float:left
}

see a working fiddle here
http://jsfiddle.net/urbanbjorkman/cFfS9/1/

This might be a bit of a mad hatter solution large chunks of text . And it still needs a lot of work (obviously since this is only a couple of lines of javascript)

But it would not be inconcievable to keep the text in one div. And then to split it into separate elements on the sortstart event. And on the sortstop event join all connecting texts back together and leaving the image where it is. thus giving you what you asked for with a div split in two with the image inbetween.