dragging content around to different div elements without moving the div itself

Question

I am trying something that is kind of difficult. I am working on a new idea that I have no clue the best option to go with.

I have 3 horizontal divs inside of a container div. The first div has a width of 250, the second has a width of 400, and the 3rd has a width of 240.

<div id="container">
<div id="div1">This is div 1.  It comes first.</div>
<div id="div2">This is div 2.</div>
<div id="div3">This is the last div</div>
</div>  <!-- ends container -->

Now, what I am attempting to do. I want to be able to click the text inside the div and drag it to another div, which will sort the text using ajax. I can code the jquery sortable code for this (unless someone has it or wants to write it). I just need to know what method to use to do this being that the containers are different widths and I only want to drag text and not the full container, and I don't want to move the actual divs themselves. I had an idea of somehow coding inner divs that contain just the text, but not sure if that will work or not. The text will ONLY be able to be moved inside its container.

Any ideas?

Answer 1

You can put the text inside <p> tags, then add the .mousedown() event to each <p> tag. When the event is fired move the <p> following the mouse ( you can change position to absolute and there are examples of mouse tracking on jquery main page ), when moving the <p> you can restrict the values so it doesn't get out of your container. Finally with .mouseup() event you can check the final position, find out in which div it was dropped and handle that.

Answer 2

Use wrap or wrapInner to wrap the contents with an element and set the sortable on that element using the 'connectWith' option to link it to the other divs.

$(function() {
    $('#container div').each(function() {
        $(this).wrapInner('<div/>').sortable({
            connectWith: '#container div'
        });;
    });
});

WrapInner Doc: http://api.jquery.com/wrapInner/

Sortable with ConnectWith: http://jqueryui.com/sortable/#connect-lists

Fiddle: http://jsfiddle.net/4SS5N/