nwhite.net

Update

Check out the demo.

I have been playing around with creating more advanced UI components recently. I ran into the need to be able to drag multiple items at a time. I created the following classes to solve my problem. It is important to know that this code is still in alpha stages and is just a proof of concept for now. I will posting a bit later how I use this to create a UI component.

Drag.Group = new Class({
 
	Implements : [Options],
 
	options : {
		'active' : true,
		'store' : 'drag-group-item',
		'filter' : $lambda(true),
		'drag' : {}
	},
 
	elements : [],
 
	initialize : function(options){
		this.setOptions(options);
	},
 
	add : function(el,options){
		var drag = new Drag.Group.Item(el, this, $merge(this.options.drag,options))
		el.store(this.options.store, drag );
		this.elements.push(el);
		return drag;
	},
 
	start : function(el,event){
		if(!this.options.active || !this.options.filter(el)) 
			el.retrieve(this.options.store).start(event,true);
		else {
			this.elements.filter(this.options.filter).each(function(match){
				match.retrieve(this.options.store).start(event,true);
			},this);
		}
	}
});
 
Drag.Group.Item = new Class({
 
	Extends : Drag.Move,
 
	initialize : function(el,group,options){
		this.group = group;
		this.parent(el,options);
	},
 
	start : function(event,alerted){
		if(alerted) this.parent(event);
		else this.group.start(this.element,event);
	}
 
});

Drag.Group has the following options:

• active : boolean ( if active grouping behavior is performed, else default Drag.Move)
• store : string ( used to store the custom drag obj on the element )
• filter : function ( takes one parameter (element). return true or false if it is part of the active drag group
• drag : object ( default drag options for newly created items see Drag )

Usage :

var drag_group = new Drag.Group({
  'filter' : function(item){ return item.hasClass('active'); }
});
 
drag_group.add(el);

The ‘add’ method takes an optional second parameter which is a ‘Drag.Move’ options object. This allows for overriding the drag behavior on a single element. ‘add’ is currently limited to only taking one element at a time. I will add array support later.

My biggest concern with the current interface is the number of ‘document’ events that get created. I haven’t noticed any real issues in testing.

I will be following up with demos and extensions soon.

Tags: Mootools