Quick Question: Can you force an item to be in a droppable location on page load … if for instance I wanted to load the selections a person made previously via a recordset … and drop their selections where they ended up. Is there a way to do that?

Thanks!

- Patrick


document.ondragstart = function () { return false; }; //IE drag hack


I wanted to make the draggables have an anchor element only so that the user would be able to use TAB to step to the draggable for keyboard accessibility.




That works fine in FF but not in IE7. Applying the above hack solves the problem nicely!

Thanks!

/Arvind

Excellent example. In my use case i have the elements which are draggable as well as droppable. so i am having the same class for all the elements.

When we drag an element from top to bottom in forward direction, it’s working fine. In the OnEnter method of Drag.Move, we can find out both draggable element and the entered droppable element.

But the reverse is not happening. Means when we drag any element in reverse direction that is from bottom to top, in the onEnter method i am getting the same element for both draggable and droppable.

i am using css position relative for the div’s.

Can someone help me how to handle this.

Thanks
Visu

By the way for those wanting the ghost drag thing check out this site

http://www.monkeyphysics.com/mootools/script/1/dragghost

var src_collap_1 = tmplurl + “/images/icon-min.gif”;
var src_collap_2 = tmplurl + “/images/icon-max.gif”;
new Asset.images ([src_collap_1, src_collap_2]);
function testfunc () {
alert(‘fdsf’);
}
var JADDModules = new Class({

options: {
handles: false,
containers: false,
onStart: Class.empty,
onComplete: Class.empty,
ghost: true,
snap: 3,
title: ‘h3′,
src_collap_1:”,
src_collap_2:”,

onDragStart: function(element, ghost){
ghost.setStyles({‘opacity’:0.7, ‘z-index’:100});
element.getChildren().setStyles({‘opacity’:0.3, ‘z-index’:1});
element.addClass(‘moving’);
},
onDragComplete: function(element, ghost){
element.getChildren().setStyle(‘opacity’, 1);
element.removeClass(‘moving’);
ghost.remove();
this.trash.remove();
}
},

initialize: function(lists, options){
//console.log(encodeURIComponent(“h%E1%BB%93ng%20c%C3%B4ng”));
this.setOptions(options);
this.lists = $$(lists);
this.lists.sort(function(a,b){return a.getCoordinates().left – b.getCoordinates().left;});
this.elements = [];
this.handles = [];

/* Get cookies */
this.hc = ”;
if(Cookie.get(‘ja-ordercolumn’)){
this.hc = Cookie.get(‘ja-ordercolumn’).split(‘,’);
if(this.hc!=”){
this.hc.each(function(cc,k){
this.hc[k] = this.hc[k].split(“_”);
},this);
}
}

this.lists.each(function(list){
var elements = list.getChildren();
elements.each(function(el,i){
el._p = list;
if(this.options.title){
el._h = $E(this.options.title, el);
if (!el._h) return;
tmp = el._h.getParent();
el._h.remove();
tmp.innerHTML = “”+tmp.innerHTML+”";
el._innerdiv = tmp.getFirst();
el._h.injectTop (tmp);
//el._h._el = el;

el._pos = i;

if(this.hc){
//element property: position, container, …
this.hc.each(function(val){
if (val[1] == el._h.innerHTML.trim().substr(0,20)) {
el._p = $(val[0]);
el._pos = parseInt(val[2]);
el._h.className = val[3];
}
},this);
}

if(el._h.className==”hide”){
src_collap = this.options.src_collap_1;
}
else{
el._h.className = ‘show’;
src_collap = this.options.src_collap_2;
}

//create handler for moveable and collapsible hotspot
divmd = new Element(‘span’,{‘class’:'ja-mdtool’});
divmd.inject(el._h);
chdl = new Element(‘img’,{‘src’:src_collap});
chdl.setStyle(‘cursor’,'pointer’);
chdl.inject (divmd);
el._h._chdl = chdl;

this.handles.push(el._h);
}
},this);

this.elements.merge(elements);

this.lists.setStyle(‘visibility’,'visible’);

},this);

this.elements.each (function (el){

el.remove();
p = $(el._p);
if(!p) return ;
tmp = p.getChildren().length > el._pos ? p.getChildren()[el._pos]:null;
if (tmp) {
if (tmp._pos > el._pos) el.injectBefore(tmp);
else el.injectAfter(tmp);
}
else el.inject (p);

});

//this.elements = $$(list);
this.handles = (this.options.handles) ? $$(this.options.handles) : (this.handles.length?this.handles:this.elements);
//this.handles.setStyle(‘cursor’, ‘move’);
this.bound = {
‘start’: [],
‘moveGhost’: this.moveGhost.bindWithEvent(this)
};
for (var i = 0, l = this.handles.length; i < l; i++){
this.bound.start[i] = this.start.bindWithEvent(this, this.elements[i]);
}

this.attach();
this.collap();

if (this.options.initialize) this.options.initialize.call(this);
this.bound.move = this.move.bindWithEvent(this);
this.bound.end = this.end.bind(this);

if (window.opera) window.addEvent("unload", this.saveCookies.bind(this));
else window.addEvent("beforeunload", this.saveCookies.bind(this));

},

collap: function(){
this.lists.each(function(list){
var elements = list.getChildren();
elements.each(function(el,i){
/* For collap */

el.elmain = $E('.ja-mod-content',el);
if(!el._h) return;

el.maxH = el.elmain.getStyle('height').toInt();

el.elmain.setStyle ('overflow','hidden');

el._h._chdl.addEvent('mousedown', function(e){
e = new Event(e).stop();
});
el._h._chdl.addEvent('click', function(e){
e = new Event(e).stop();
el.toggle();
});

el.toggle = function(){
if (el._h.className=='hide'){
el.show();
}
else el.hide();
}

el.show = function() {
el._h.className='show';
el._h._chdl.src = src_collap_2;
new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatuss}).start(el.elmain.offsetHeight,el.elmain.scrollHeight);
}
el.hide = function() {
el._h.className='hide';
el._h._chdl.src = src_collap_1;
new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatuss}).start(el.elmain.offsetHeight,0);
}
el.toggleStatuss = function () {
el._status=(el._status=='hide')?'show':'hide';
}

if(el._h.className=='hide') {
el.hide();
}
else{
el.show();
}

}, this);
}, this);
},

attach: function(){
this.handles.each(function(handle, i){
//handle.addEvent('mousedown', this.bound.start[i]);
handle.addEvent('mousedown', this.bound.start[i]);
handle.setStyle('cursor','move');
}, this);
},

detach: function(){
this.handles.each(function(handle, i){
handle.removeEvent('mousedown', this.bound.start[i]);
}, this);
},

start: function(event, el){
this.active = el;
//this.coordinates = this.list.getCoordinates();
if (this.options.ghost){
this.previous = 0;
var position = el.getPosition();
this.offsetX = event.page.x – position.x;
this.offsetY = event.page.y – position.y;
this.trash = new Element('div').inject(document.body);

this.ghost = el.clone().inject(this.trash).setStyles({
'position': 'absolute',
'left': event.page.x – this.offsetX,
'top': event.page.y – this.offsetY,
'background':'url(../images/box-br.gif) no-repeat bottom right #444444',
'width': el.offsetWidth
});

document.addListener('mousemove', this.bound.moveGhost);
this.fireEvent('onDragStart', [el, this.ghost]);
}
document.addListener('mousemove', this.bound.move);
document.addListener('mouseup', this.bound.end);
this.fireEvent('onStart', el);
event.stop();
},

moveGhost: function(event){
this.ghost.setStyles({'left': event.page.x-this.offsetX,
'top': event.page.y-this.offsetY
});
event.stop();
},

move: function(event){
var cor = this.active.getCoordinates();
if(cor.left < event.page.x && event.page.x cor.top && event.page.y list.getCoordinates().left) clist = list;
}, this);

if(clist == this.active._p) {
var now = event.page.y;
this.previous = this.previous || now;
var up = ((this.previous – now) > 0);
var prev = this.active.getPrevious();
var next = this.active.getNext();
if (prev && up && now next._h.getCoordinates().top) this.active.injectAfter(next);
this.previous = now;
}else{
var now = event.page.y;

//Get correct position
var els = clist.getChildren();
if(els.length) {
var cel = els[0];
els.each(function(el, idx){
if (now > el._h.getCoordinates().bottom)
{
if(idx < els.length – 1) cel = els[idx+1];
else cel = null;
}
},this);

if(cel) this.active.injectBefore(cel);
else this.active.inject(clist);
} else {
this.active.inject(clist);
}
this.active._p = clist;
this.previous = now;
}

},

serialize: function(converter){
return this.list.getChildren().map(converter || function(el){
return this.elements.indexOf(el);
}, this);
},

end: function(){
this.previous = null;
document.removeListener('mousemove', this.bound.move);
document.removeListener('mouseup', this.bound.end);
if (this.options.ghost){
document.removeListener('mousemove', this.bound.moveGhost);
this.fireEvent('onDragComplete', [this.active, this.ghost]);
}
this.fireEvent('onComplete', this.active);
},

saveCookies: function() {
if (Cookie.get("ja-ordercolumn") == '-') {
Cookie.set("ja-ordercolumn", '',{path:'/'});
return;
}
c = '';
this.lists.each(function(list){
var elements = list.getChildren();
if (!elements){
return;
}
elements.each(function(el,i){
c += el._p.id + "_" + el._h.innerHTML.trim().substr(0,20) + "_" + i + "_" + el._h.className+",";
},this);
},this);
if (this.hc) {
this.hc.each(function(value, k){
if (!c.test ('_' + value[1] + '_')) {
c += value[0] + "_" + value[1] + "_" + value[2] + "_" + value[3]+",";
}
},this);
}
c = c.substr(0, (c.length-1));
Cookie.set("ja-ordercolumn", c, {duration: 365,path:'/'});
}
});

document.write('.ja-movable-container{visibility: hidden;}’);
window.addEvent(‘load’, function(){
new JADDModules($$(“.ja-movable-container”), {src_collap_1:src_collap_1, src_collap_2:src_collap_2});
});

JADDModules.implement(new Events, new Options);

JAResizer = new Class({
initialize: function(els, options){
this.options = Object.extend({
min: 100,
max: 0
}, options || {});
$$(els).each(function(el){
el.onmouseover = function(){
this.addClass(‘ja-colresizehover’);
};

resizemouseout = function(){
//console.log(‘call mouse out event for ‘ + this);
this.removeClass(‘ja-colresizehover’);
}
el.onmouseout = resizemouseout;

var prev = el.getPrevious();
var next = el.getNext();
prev.makeResizableNew ({handle: el, modifiers:{y:false}, limit:{width:[100]}});
next.makeResizableNew ({handle: el, modifiers:{y:false}, dir: -1, limit:{width:[100]}});
var eld = el.makeDraggable({modifiers:{y:false}});

eld.addEvent(‘onStart’, function (el) {
//console.log(‘Remove mouse out for ‘ + eld.element);
el.onmouseout = null;
this._next = el.getNext();
this._prev = el.getPrevious();
this._w = this._prev.getStyle(‘width’).toFloat() + this._next.getStyle(‘width’).toFloat();
});

eld.addEvent(‘onComplete’, function (el) {
el.onmouseout = resizemouseout;

var w1 = this._prev.offsetWidth;
var w2 = this._next.offsetWidth;
var w1p = w1/(w1+w2)*this._w;
var w2p = w2/(w1+w2)*this._w;
var elwp = el.offsetLeft * this._w / (w1+w2);
this._prev.setStyle(‘width’, w1p + ‘%’);
this._next.setStyle(‘width’, w2p + ‘%’);
el.setStyle (‘left’, elwp + ‘%’);

el = el.getCoordinates(this.options.overflown);
var now = this.mouse.now;
if (!(now.x > el.left && now.x < el.right && now.y el.top)) resizemouseout.call(this.element);

});
}.bind( this));
}
});

Drag.Resize = Drag.Base.extend({

options: {
dir: 1
},

initialize: function(el, options){
this.setOptions(options);
this.parent(el);
},

start: function(event){
this.fireEvent(‘onBeforeStart’, this.element);
this.mouse.start = event.page;
var limit = this.options.limit;
this.limit = {‘x’: [], ‘y’: []};
for (var z in this.options.modifiers){
if (!this.options.modifiers[z]) continue;
this.value.now[z] = this.element.getCoordinates()[this.options.modifiers[z]].toInt();
this.mouse.pos[z] = event.page[z] – this.value.now[z]*this.options.dir;
if (limit && limit[z]){
for (var i = 0; i this.limit[z][1])){
this.value.now[z] = this.limit[z][1];
this.out = true;
} else if ($chk(this.limit[z][0]) && (this.value.now[z] < this.limit[z][0])){
this.value.now[z] = this.limit[z][0];
this.out = true;
}
}
if (this.options.grid[z]) this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);
this.element.setStyle(this.options.modifiers[z], this.value.now[z] + this.options.unit);
}
this.fireEvent('onDrag', this.element);
event.stop();
}

});

/*
Class: Element
Custom class to allow all of its methods to be used with any DOM element via the dollar function .
*/

Element.extend({

/*
Property: makeDraggable
Makes an element draggable with the supplied options.

Arguments:
options – see and for acceptable options.
*/

makeResizableNew: function(options){
return new Drag.Resize(this, $merge({modifiers: {x: ‘width’, y: ‘height’}}, options));
}

});

This works in mootools 1.12, but not work in 1.2.x, please help me

Thanks :D

Sounds like you need to go through the mootorial, or at least get a bit more familiar with mootools.

I said to put in the onDrop funciton, scroll up to David’s code and you’ll see an “onDrop” function. That’s where :)

el = the element being dragged

droppable = the element receiving

You’d probably need those to give the database anything worthwhile.

I knew nothing about javascript less than a year ago but with mootools I’m able to do all sorts of crap I once thought impossible. It’s just too easy to pick up.