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

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

<script type="text/javascript">
Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})
Droppables.add('fList',{accept:'meat',onDrop:function
(dragName,dropName){placeFood(dragName,dropName)}})

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.destroy("fList")
        Sortable.create("fList", {constraint:false})

}

</script>

On Jan 22, 2:02 pm, Walter Lee Davis <wa...@wdstudio.com> 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 & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to