Rails spinoffs - Jun 2005 - dragdrop library

Thomas,

Special thanks for the dragdrop library. I consider your javascript 
abilities quite superior to my own, in fact I''m just setting out on a
quest
to master javascript, I found your library the other night and started 
hacking away on my app. I replaced a dom-drag.js library I was using before 
with yours since it integrated with prototype better, and appears to be 
better coded. I''m making some suggestions and requesting some general 
feedback from you.

My goal of using draggable objects is to have a customizable interface for 
my webapp. I''m not really looking for drag and drop functionality, just
drag
whereever you want. I would like a callback for dragEnd to reposition the 
element when the drag is complete. I found when I set out to do this that 
the app failed because I had not added anything to the Droppables, I think 
this limits the flexibility of the code.

I created a "Container" object which is initialized with an html
element id
and functions as a droppable object for everything, and the Draggable 
objects are set with a change callback called "confine" inside the
Container
object. This prevents the draggable object from moving outside of the 
container.  I think my code is ugly, especially the confine method, what do 
you think? Could this be better incorporated into the library? I like that I 
did not have to modify the library at all to get this functionality, though.


window.onload = function() {
   Content = {
      init: function(content) {
         this.content = $(content);
         Droppables.add(this.content, {
     accept: ''fe'',
     onDrop: function(element) {
        window.status = ''Moved '' + element.alt + ''
within content.'';
     }
  });
  //this.limit_left = this.content.offsetLeft;
  //this.limit_top = this.content.offsetTop;
  //var parent = this.content.offsetParent;
  //while (parent != null) {
  //   this.limit_left += parent.offsetLeft;
  //   this.limit_top += parent.offsetTop;
  //   parent = parent.offsetParent;
  //}
  // TODO: Add event listener for screen resize
      },
      // make sure the draggable element doesn''t leave the confines of 
content
      confine: function(draggable) {
  if (parseInt(draggable.element.style.left) < 0)
     draggable.element.style.left = ''0px'';
  if (parseInt(draggable.element.style.top) < 0)
     draggable.element.style.top = ''0px'';
  if ( (parseInt(draggable.element.style.left) + 
parseInt(draggable.element.offsetWidth)) > 
parseInt(Content.content.offsetWidth))
     draggable.element.style.left = parseInt(Content.content.offsetWidth) - 
parseInt(draggable.element.offsetWidth) + ''px'';
  if ( (parseInt(draggable.element.style.top) + 
parseInt(draggable.element.offsetHeight)) > 
parseInt(Content.content.offsetHeight))
     draggable.element.style.top = parseInt(Content.content.offsetHeight) - 
parseInt(draggable.element.offsetHeight) + ''px'';
      }
   }
   Content.init(''content''); // content is a container for the
draggables
   var box = new Draggable(''drag_box'', {
      change: Content.confine
   });
   var box2 = new Draggable(''drag_box2'', {
      change: Content.confine
   });


See my demo at www.cloudius.com
Trying to make an interactive desktop-like interface. Next I was planning on 
making the "windows" resizable. Have you any thoughts on that?

-Jeff