Maybe this is what you're looking for. Drag an item from the second
column to the first.

<table border="1" cellpadding="5">
                <td valign="top">
                        <ul id='fList'>
                <td valign="top">
                        <div id='fish' class='meat'>Fish</div>
                        <div id='chicken' class='meat'>Chicken</div>

<script type="text/javascript">
Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})

function findPos(obj) {
        var curleft = curtop = 0;
        if (obj.offsetParent) {
                curleft = obj.offsetLeft
                curtop = obj.offsetTop
                while (obj = obj.offsetParent) {
                        curleft += obj.offsetLeft
                        curtop += obj.offsetTop
        return [curleft,curtop];

function placeFood(dragName,dropName) {
        myPos = findPos($(dropName))
        //alert(myPos[0]+", "+myPos[1])
        $("fList").insert(new Element("li", { id: $(dragName).id+"_" }))
        $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
        Sortable.create("fList", {constraint:false})



On Jan 22, 2:02 pm, Walter Lee Davis <> wrote:
> I have a sortable div thus:
> Sortable.create('timeline',{tag:'div', overlap:'horizontal',  
> constraint:false,  scroll:window, dropOnEmpty:true});
> div#timeline is contained within a larger div#drop which is droppable.
> <div id="drop">
> <p>A lovely caption explaining the DnD behavior</p>
> <div id="timeline">
> </div>
> </div>
> I then have a bunch of elements of class clip or class photo which are  
> individually set to be draggable. When I drag a clip or a photo onto  
> div#drop, an onDrop function inserts a clone of the dropped object  
> into div#timeline.
> At this point, if I run Sortable.create again, these dropped items  
> become sortable. But if I do that, I run into other issues later that  
> I'm having trouble overcoming.
> So my question is this: Is it possible to add elements to a Sortable  
> by any means other than physically dragging and dropping without re-
> running the create method afterward? I've looked through the script  
> and can't see a function that adds the dragged element into it. I've  
> been using $('timeline').insert(clonedElement), and while it does put  
> the element into the div, the result is not sortable.
> Thanks in advance,
> Walter
You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to