Forum: Rails Spinoffs (closed, excessive spam) draggable divs which change position with each other

Posted by phparion (Guest)
on 2008-06-30 07:28
(Received via mailing list)
Hi

I didn't find any tutorial or sample where you can make something like
this

http://piwik.org/demo/index.php?module=Home&action...


you can drag and change div positions. is it possible with this
library? can anybody tell me please how to do this? i have a number of
charts and i want let the user rearrange their positions as done on
this link.

thank you very much!
Posted by Diodeus (Guest)
on 2008-06-30 15:20
(Received via mailing list)
It is possible, but there's no "out of the box" solution. Creating the
draggables is easy enough, but you would have your own listener to
figure out when to rearrange the other boxes, and where to draw the
outline border for the droppable region.
Posted by Walter Davis (walterdavis)
on 2008-06-30 18:27
(Received via mailing list)
Isn't there a portal toolkit over at Scripteka? I could swear I have
seen this, ready to use and everything.

Walter
Posted by Matt Foster (Guest)
on 2008-06-30 22:24
(Received via mailing list)
Hmm, Sortable could get 90% of this done, drawing the pseudo box would
be the only special change, and I know its been done, can't remember
now who...

http://github.com/madrobby/scriptaculous/wikis/sortable


--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com
Posted by phparion (Guest)
on 2008-07-01 07:05
(Received via mailing list)
In fact, it has been done here 
http://github.com/madrobby/scriptaculous/wikis/puzzle-demo

i checked the source code and included javascript file is builder.js
where we get different files in source folder. Anyway, I copied the
html of images to a page on my server and included effect.js,drag.js
and scriptiolus.js files and it worked on my server i,e the puzzle
game worked on my server as it is working in the demo.

Now the problem is that I have flash charts, i can display them in
DIVs and not as images. I did this to change the function call of demo
game,

<script type="text/javascript">
(function(){
  var p = $('flashcharts');

  Sortable.create('flashcharts', {
    tag:'div',overlap:'horizontal',constraint: false
  });
})();
</script>


but it didn't work for me. I cannot drag divs which have flash charts
in each of them.

Has anybody got any idea how to deal with this?
Posted by phparion (Guest)
on 2008-07-01 07:08
(Received via mailing list)
Ok, it has started working for me. thank you all for your support and
this library rocks :)
This topic is locked and can not be replied to.