thr3ads.net - Rails spinoffs - Implementing nested drag and drop using scriptaculous [Mar 2006]

If this information is useful, please help other people find it:
Share via:

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

head link

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

head link

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>

<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

head link

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

head link

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/.

Apparently Analagous Threads

Search for more apparently analagous threads

Rails spinoffs - Mar 2006 - Implementing nested drag and drop using scriptaculous

Implementing nested drag and drop using scriptaculous

Re: Implementing nested drag and drop using scriptaculous

Re: Implementing nested drag and drop using scriptaculous

Re: Implementing nested drag and drop using scriptaculous

Re: Implementing nested drag and drop using scriptaculous

Apparently Analagous Threads