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/.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
