I've got the drag and drop capability; it's getting it to talk to a form and
pass values somehow to enter info in a db.

On Tue, Mar 10, 2009 at 12:11 PM, Diodeus <diod...@gmail.com> wrote:

>
> This should get you started (requires scriptaculous)
>
> <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>
> <input type=button onclick="getList()" value ="get list">
>
> <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})
>
> }
>
> function getList() {
>        var myList = ''
>        $('fList').select('li').each(function(element) {
>                myList = myList + $(element).innerHTML + "|"
>        })
>        alert(myList)
> }
>
> </script>
>
> On Mar 10, 10:20 am, Harleycoder <mbrio...@gmail.com> wrote:
> > Hi
> > I am wondering how to make a drag and drop function actually pass
> > values - I'm trying to build a photo gallery function where you have a
> > bunch of photos you've uploaded and you are going to drag them to a
> > (box) that represents a certain photo gallery.
> >
> > I'm a php coder and while I've used JavaScript for years, I've never
> > actually written any from scratch; just changed existing code, made it
> > dynamic, etc.
> >
> > Hope someone can help me make some magic...I've seen this in action
> > but don't have the source code!
> >
> > Best,
> > MJ
> >
>


-- 
Marian Briones

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