I think you should try to design this system more in javascript and less
in HTML. I.e. Store your draggables in a cache somewhere and add and
remove them via pure JS, not using embedded script tags.
This may not do *exaclty* what you're trying to do but it is a (very
good) start:
<div id="draggables"></div>
<div id="otherdraggables"></div>
<script type="text/javascript">
DraggableCache = Class.create();
DraggableCache .prototype = {
initialize: function(parent,options){
this.parent = $(parent);
this.options = options;
this.cache = new Cache();
},
add: function(id,content,options){
var newDrag = $(Builder.node('div',{id:id}));
newDrag.update(content);
this.parent.appendChild(newDrag);
options = options ?
Object.extend(Object.clone(this.options),options) : this.options;
this.cache.insert(new Draggable(newDrag,options, id);
},
get: function(id){
return this.cache.get(id);
},
insert: function(draggable){ //insert an existing draggable
this.cache.insert(draggable);
if(!draggable.element.descendantOf(this.parent)){
this.parent.appendChild(draggable.element);
}
},
remove: function(id){ //remove from cache but do not destroy
var draggable = this.cache.remove(id);
draggable.element.parentNode.removeChild(draggable.element);
return draggable;
},
destroy: function(id){
this.cache.remove(id).dispose();
$('id').remove();
},
clear: function(){
this.cache.each(function(draggable){
var element = draggable.element;
draggable.dispose();
element.remove();
}).clear();
}
};
var drags= new DraggableCache('draggables',{revert: true});
var otherdrags = new DraggableCache('otherdraggables',{revert:true});
//insert new draggables
drags.add('someUniqueId','To be dragged',{
change: function(){
alert('this function applies only to this draggable');
}
});
otherdrags.add('anotherUniqueId','Don\'t drag this');
//retrieve a draggable
var someDraggable = drags.get('someUniqueId');
//remove a draggable with id= 'someUniqueId'
drags.destroy('someUniqueId');
//transfer a draggable from one cache to another:
otherdrags.insert(drags.remove('someUniqueId'));
//remove ALL draggables to make room for new ones
drags.clear();
</script>
There are likely some bugs in that code as I typed it all into
Thunderbird just now ;)
Using something like this to handle all of your draggable
creation/destruction will make things much easier, not to mention this
actually does proper cleanup whereas before your were leaking memory
each time you created a new one over the top of an old one.
In your Ajax requests I recommend using a JSON encoded response so that
in your onSuccess function you can loop through creating your new
draggables:
server response is a json encoded hash with an "elements" property that
contains an array of hashes of {id, content}
onSuccess: function(xhr, json){ //beware of header size limitations with
this method
if(!json || !json.elements){ alert('Didn't get expected response'); }
drags.clear();
$A(json.elements).each(function(drag){
drags.add(drag.id, drag.content);
}
}
Pretty easy, no?
Hope this helps.
Colin
P.S. Here is the Cache class, I created it for a patch I'm working on
for Prototype's event system and it comes in handy here as well :) Maybe
someday it'll be Prototype core? It is extended with Enumerable so most
if not all of those functions will work as expected. Since it doesn't
extend the Object used for storage it performs better than Hash and has
simple (and fast, without is not fast) add/remove methods for
convenience when dealing with caches.
------------------------
var Cache = Class.create();
Cache.prototype = {
initialize: function(){
this.hash = {};
this.length = 0;
},
_each: function(iterator) {
for (var key in this.hash){ iterator(this.hash[key]); }
},
clear: function() {
this.hash = null;
this.initialize();
return this;
},
insert: function(value,key){
key = key || this.length++;
this.hash[key] = value;
return key;
},
remove: function(key){
var value = this.hash[key];
delete this.hash[key];
return value;
},
get: function(key){
return this.hash[key];
}
};
Object.extend(Cache.prototype, Enumerable);
------------------
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
