Dipesh Khakhkhar
2006-Mar-23 02:25 UTC
Implementing nested drag and drop using scriptaculous
Hi. I have gone through the scriptaculous wiki. I am trying to implement nested drag and drop but not able to do this. The situation is like this. _____________________________ | abc | => Box1Line1 | cde | => Box1Line2 | efg | => Box1Line3 | h | => Box1Line4 ----------------------------- Fig: Box 1 ========== _____________________________ | 123 | => Box2Line1 | 456 | => Box2Line2 | 789 | => Box2Line3 | 10 | => Box2Line4 ----------------------------- Fig Box 2 =========== As shown in the figures above, I have Box1 and Box2 (whcih i will make either div or list elements) and within each of them i have lines (another list). I am trying to create these boxes and lines draggable. Further, i am trying to create my lines i.e. list inside these boxes droppable so that, I can drop lines from one box into another. For example, from box1, i should be able to drag line containt text "abc" and drop it into box2. After dropping it i want to save the state of my list. I am not able to figure out how can i achieve this using scriptaculous. Any help in solving this would be highly appreciated, if it is possible using scriptaculous. Thanks! _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Martin Scheffler
2006-Mar-23 12:26 UTC
Re: Implementing nested drag and drop using scriptaculous
> ===========> > As shown in the figures above, I have Box1 and Box2 (whcih i will make > either div or list elements) and within each of them i have lines > (another list). I am trying to create these boxes and lines draggable. > Further, i am trying to create my lines i.e. list inside these boxes > droppable so that, I can drop lines from one box into another. For > example, from box1, i should be able to drag line containt text "abc" > and drop it into box2. After dropping it i want to save the state of my > list. > > I am not able to figure out how can i achieve this using scriptaculous. > > Any help in solving this would be highly appreciated, if it is possible > using scriptaculous. > > Thanks!I am not sure if this is what you want: You have two sortables, and you want to be able to move draggables from one sortable to the other. To do this, give both sortables these options on startup: {containment:["boxlist1", "boxlist2"]} -- Posted via http://www.ruby-forum.com/.
Mark Jetter
2006-Mar-23 19:08 UTC
Re: Implementing nested drag and drop using scriptaculous
Martin Scheffler wrote:> > I am not sure if this is what you want: > You have two sortables, and you want to be able to move draggables from > one sortable to the other. To do this, give both sortables these options > on startup: {containment:["boxlist1", "boxlist2"]}Hi Martin, Thanks for replying and throwing some light on this issue. You got it right, i want two sortables (eventually there will be ''n'' sortables which i should be able to place on the page dynamically) and I should be able to drag items within this sortables into another sortables. Below is the snippet of code, which is mostly taken from examples of scriptaculous and added little stuff to do nested sortables (or drap and drop). /** <html> <head> <title>Nested Sortables</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /> <style type="text/css" media="screen"> ul { height: 100px; border:1px dotted #888; } </style> </head> <body> <h1>Nested Sortables</h1> <ul id="firstlist"> <li id="thelist1_1">Hey there! I''m item#1/1</li> <li id="thelist1_2">Hey there! I''m item#1/2</li> <li id="thelist1_3">Hey there! I''m item#1/3</li> </ul> <ul id="secondlist"> <li id="thelist2_1">Hey there! I''m item#2/1</li> <li id="thelist2_2">Hey there! I''m item#2/2</li> <li id="thelist2_3">Hey there! I''m item#2/3</li> </ul> <script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ Sortable.create("firstlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}); Sortable.create("secondlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}) // ]]> </script> <!-- Trying to sort firstlist and second list but not successful. Tried to make one more list element mainlist comprising of firstlist, secondlist but it didn''t work for me and then made firstlist and second list as draggable so now dragging is workign fine but not soring. How should i do this?--> <script type="text/javascript" language="javascript"> new Draggable(''firstlist'',{revert:true}); new Draggable(''secondlist'',{revert:true}); </script> <a href="#" onclick="alert(Sortable.serialize(''firstlist''));return false;">Serialize sortable1</a> <a href="#" onclick="alert(Sortable.serialize(''secondlist''));return false;">Serialize sortable2</a> <div id="debug"></div> </body> </html> */ I am trying out options in it. If I arrive to the solution, i will inform you. But if you know where i m messing up, please inform me. Thanks! Regards, -- Posted via http://www.ruby-forum.com/.
Martin Scheffler
2006-Mar-23 19:26 UTC
Re: Implementing nested drag and drop using scriptaculous
that won''t work. Try it like this: Wrap both sortables in a div and make that draggable. Also use the handle property, so that not all of the div is a drag handler. <div id="dragdrop1"> <div id="handle">blabla</div> <ul id=firstlist><li /></ul> </div> <div id="dragdrop2"> <div id="handle">blabla</div> <ul id=secondlist><li /></ul> </div> Sortable.create("firstlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}); Sortable.create("secondlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}) new Draggable(''dragdrop1'',{revert:true, :handle:"handle"}); new Draggable(''dragdrop2'',{revert:true, :handle:"handle"}); -- Posted via http://www.ruby-forum.com/.
Mark Jetter
2006-Mar-23 20:01 UTC
Re: Implementing nested drag and drop using scriptaculous
Hi Martin, Thanks for replying immediately. Highly appreciated. As i was trying my hands on it finally the nested sortables worked. Here is the code. I still have some questions on it which i have listed below the working code. /** <html> <head> <title>Nested sortables using scriptaculous</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /> <style type="text/css" media="screen"> ul { height: 100px; border:1px dotted #888; } </style> </head> <body> <h1>Nested Sortables</h1> <ul id="mainList"> <li id="m1" ><span class="handle">DRAG HERE - Hey there! m1</span> <ul id="firstlist"> <li id="f1">M1-f1</li> <li id="f2">M1-f2</li> </ul> </li> <li id="m2" ><span class="handle">DRAG HERE - Hey there! m2</span> <ul id="secondlist"> <li id="f1">M2-s1</li> <li id="f2">M2-s2</li> </ul> </li> <li id="m3" ><span class="handle">DRAG HERE - Hey there! m3</span> <ul id="thirdlist"> <li id="f1">M3-t1</li> <li id="f2">M3-t2</li> </ul> </li> </ul> <script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ Sortable.create("firstlist", {dropOnEmpty:true,containment:["firstlist","secondlist", "thirdlist"],constraint:false}); Sortable.create("secondlist", {dropOnEmpty:true,containment:["firstlist","secondlist", "thirdlist"],constraint:false}) Sortable.create("thirdlist", {dropOnEmpty:true,containment:["firstlist","secondlist", "thirdlist"],constraint:false}) Sortable.create("mainList", {dropOnEmpty:true,handle:''handle'', constraint:false}); // ]]> </script> <script type="text/javascript" language="javascript"> </script> <div id="debug"></div> </body> </html> */ The above code works great (firefox is not rendering nested list properly. I will look into it. Another concern is to save the positions after drag and drop as the contents are stored in file. Right now i was using arrows (up and down) and i was trapping onClick event when clicked on arrow images. Which event i should capture here to send the request to the server to save the new positioning? Further, I am not able to see the cursor (which give proper indication of draggable objects) which is usually i see on scriptaculous demos on the wikis, am i missing some css class out here? Can i dynamically add new list ids, in the containment box of each list using DOM or Javascript, as i am creating list dynamically? I have tried the snippet which you have just provided to me after some minor errors in systax. It works partially, the outer divs are only draggable they dont'' switch positions after dropping them. How should i do this? /** <html> <head> <title>Martin Scheffler - Drag and drop</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /> <style type="text/css" media="screen"> ul { height: 100px; border:1px dotted #888; } </style> </head> <body> <h1>Nested drag and drop by Martin Scheffler</h1> <div id="dragdrop1"> <div id="handle">blabla1</div> <ul id=firstlist> <li>d1-1 </li> <li>d1-2 </li> </ul> </div> <div id="dragdrop2"> <div id="handle2">blabla2</div> <ul id="secondlist"> <li>d2-1 </li> <li>d2-2 </li> </ul> </div> <script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ Sortable.create("firstlist",{dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}); Sortable.create("secondlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}); new Draggable(''dragdrop1'',{revert:true, handle:"handle"}); new Draggable(''dragdrop2'',{revert:true, handle:"handle2"}); // ]]> </script> <script type="text/javascript" language="javascript"> </script> <div id="debug"></div> </body> </html> */ Thanks for your help in solving this. Regards, Dipesh Martin Scheffler wrote:> that won''t work. Try it like this: > Wrap both sortables in a div and make that draggable. Also use the > handle property, so that not all of the div is a drag handler. > > <div id="dragdrop1"> > <div id="handle">blabla</div> > <ul id=firstlist><li /></ul> > </div> > > <div id="dragdrop2"> > <div id="handle">blabla</div> > <ul id=secondlist><li /></ul> > </div> > > Sortable.create("firstlist", > {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}); > Sortable.create("secondlist", > {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false}) > new Draggable(''dragdrop1'',{revert:true, :handle:"handle"}); > new Draggable(''dragdrop2'',{revert:true, :handle:"handle"});-- Posted via http://www.ruby-forum.com/.