Forum: Ruby on Rails drag and drop problem

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Matthijs (Guest)
on 2006-01-09 04:06
I am working on a resource planning problem. I like to use a nice drag
and drop interface for that. E.g. have a box of persons and a box of
projects, now I would like to assign a persom to project by dragging it
from the available resources box to a recieving project box.

I have studied the amazing drag and drop shopping card code listed here
http://demo.script.aculo.us/shop

What I need to change is that the resources (products in the cart
example) should be deleted from the list of available persons after an
assignment is done (I can do a :revert => false, but that is only part
of the job.).

Even more challaging is to found a way of reassigning a resource: I
would like to get a person back from a project into the pool of
available persons again.

I tried lots of things but I cannot make the drop action (form the
shopping card div bacl into the products div) update the products div.
The cart div is the only one updated. I wonder if it is the nesting of
the divs that can make it work ? A drop on the waste bin does update the
shopping cart, also, so there should be simple trick to get the products
box to be updated also (maybe reflecting new stock levels ??)

Any hints or pointers are more then welcome,

Thanks,

Matthijs
Vivek K. (Guest)
on 2006-01-09 06:29
(Received via mailing list)
On 1/9/06, Matthijs <removed_email_address@domain.invalid> wrote:
> example) should be deleted from the list of available persons after an
> the divs that can make it work ? A drop on the waste bin does update the
> shopping cart, also, so there should be simple trick to get the products
> box to be updated also (maybe reflecting new stock levels ??)
>
> Any hints or pointers are more then welcome,


Basically you have 2 boxes and you want to be able to drag-drop from one
box
to another.The first one being available resources and the second one
being
the assigned resources.Is that right?
Matthijs (Guest)
on 2006-01-09 11:58
Vivek K. wrote:

> Basically you have 2 boxes and you want to be able to drag-drop from one
> box
> to another.The first one being available resources and the second one
> being
> the assigned resources.Is that right?

Thats is correct, my main problem is to figure out to update BOTH boxes
on a drop event.
Vivek K. (Guest)
on 2006-01-09 16:17
(Received via mailing list)
Here you go...I couldnt figure out a simpler way other than to tinker
with
the id of the elements you want to drag and drop.
You need to modify the id's of elements depending on which box they are
in.
I have 2 boxes a and b.the available resources and the used resources in
your case. I modify the id's of the elements as a1,a2 and b1,b2
according to
where they are at the moment.

Hope this helps..I havent tested on IE.
Matthijs (Guest)
on 2006-01-09 17:33
Vivek K. wrote:
>
> Hope this helps..I havent tested on IE.

OK thanks I get the idea, i am now tryling implement it, could you post
the code you used for testing here, I guess that would be helpfull, also
for others reading this list.

If I manage to get it working I will also post the code for the
sollutions here.

regards, and thanks for the help so far ...

Matthijs
Vivek K. (Guest)
on 2006-01-10 05:45
(Received via mailing list)
Hi Matthijs,
What code are you talking of  ? I sent the entire HTML code .Hope you
got
that.
Vivek
Vivek K. (Guest)
on 2006-01-11 00:01
(Received via mailing list)
oops..I think the attachement didnt come through eariler..
I am pasting the HTML

<html>
<head>
 <script src="/javascripts/prototype.js"
type="text/javascript"></script>
 <script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
</head>
<body>
<div id="a" style ="float:left;width:20%;height:30%;border:solid red
thick">
<a href="#" class="in_a" id="a1">One</a>
<a href="#" class="in_a" id="a2">Two</a>
<script type ="text/javascript" language="javascript">
  new  Draggable('a1',{revert:true});
  new  Draggable('a2',{revert:true});

  function showChildren(eid){
  var childList = $(eid).childNodes;
  var clist=' ';
 for (var i = 0;i<childList.length;i++) {
  if (childList[i].nodeName=="A") {
   clist+=childList[i].id+' ';
 }
}
 alert('Children of '+eid + ':'+clist);
}
  Droppables.add('a',{accept: 'in_b' ,onDrop: function(element) {
                       if(element.parentNode.id == 'b'){
                         document.getElementById('b').removeChild(element);
                       }
                       var anc = document.createElement("a");
                       anc.setAttribute("href","#");
                       var id = element.id[1];
                       id='a'+id;
                       anc.setAttribute('id',id);
                       anc.setAttribute('class','in_a');
                       anc.innerHTML=element.innerHTML;
                       document.getElementById('a').appendChild(anc);
                       new  Draggable(id,{revert:true});
                       }
                       });
</script>
</div>

<div id="b" style ="float:left;width:20%;height:30%;border:solid green
thick">

<script type ="text/javascript" language="javascript">
  Droppables.add('b',{accept: 'in_a' ,onDrop: function(element) {

                       if(element.parentNode.id == 'a'){
                         document.getElementById('a').removeChild(element);
                       }
                       var anc = document.createElement("a");
                       anc.setAttribute("href","#");
                       var id = element.id[1];
                       id='b'+id;
                       anc.setAttribute('id',id);
                       anc.setAttribute('class','in_b');
                       anc.innerHTML=element.innerHTML;
                       document.getElementById('b').appendChild(anc);
                       new  Draggable(id,{revert:true});
                       }
                       });
</script>
</div>

<a href="#" onclick ="showChildren('a');showChildren('b');" >Click here
to
know who has what</a>
</body>
</html>
This topic is locked and can not be replied to.