MooTools Drag.Ghost

The drag function doens't work in IE. Am I doing something wrong? Your version works perfect, but when I copy -> paste it all went wrong.

Can you be more specific? What went wrong? Pay attention to the section above dealing with "Styling", maybe that helps?

Hi,
I'm trying to use your class work fine but I need to drag img with href
Is it possible to add a delay to allow the click to open the current link ?
Sorry, I tried but I don't know enough mootools.
Big Thx

A link is for clicking, a draggable for dragging. The two mouse-actions should not go together. I'd say you increase the size of you draggable to have plenty of space outside the link to drag it by.

@Monkey: At first it seems complicated or highly error-prone to attempt to distinguish between a link-click and a drag-click...but I found that it's actually not so difficult to accomplish:

In the onDrop method, just check the overall distance of the drag. If the distance is greater than a (very small...1-2px) margin of error, dragging events are fired and the onClick action returns false (preventing the linking action in the browser). Otherwise the custom onDrop event is not fired...and instead returns true to execute the browser linking action.

So the margin of error accounts for any accidental drag on the part of the user when clicking the link. (In fact, while testing things out myself, I found that I almost never had ANY accidental drag...but its always a good idea to account for all the coffee addicts and grandmas of the net)

Anyway this gave me a very intuitive draggable links feature with zero false-positives (during testing atleast) in my mootools imp, so I thought I'd throw it out there.

Thanks for posting this. I'd been struggling with mootools drag setting position to 'absolute' and didn't think I could solve it until I saw this page.

It's magical, excellent work !
thanks a lot for that code :)

Great class! I've used this solution in a project I'm working on several weeks ago but I've done it manually. I'll review my code and try to implement this sweet little class!

Great job!

hi,
your script is awsum and it works like a charm, but
I found out that if you place the draggable list into a container that has the overflow:scroll property, it turns out that when you try to drag the elements down in the scroll position, the ghost clone is created in the wrong place, I found the solution, and here is the code:

ghost: function() {
this.element = this.element.clone()
.setStyles({
'opacity': this.options.opacity,
'position': 'absolute',
'z-index': 1000,
'top': ((e.page.y)-(this.element.getStyle('height').toInt()/2)), //this.element.getCoordinates()['top'],
'left': ((e.page.x)-(this.element.getStyle('width').toInt()/2)) //this.element.getCoordinates()['left']
})
.inject(document.body)
.store('parent', this.element);
},


-----


the main changes are into the ghost function.
hope this could be useful to others that encountered this issue.

cheerz

-k-

sorry, I posted the wrong code,
this is the right one. basically you have to pass the event to the this.gost() function @ line 22, that becomes
this.ghost(event);

and then this:

ghost: function() {
this.element = this.element.clone()
.setStyles({
'opacity': this.options.opacity,
'position': 'absolute',
'z-index': 1000,
'top': ((e.page.y)-(this.element.getStyle('height').toInt()/2)), //this.element.getCoordinates()['top'],
'left': ((e.page.x)-(this.element.getStyle('width').toInt()/2)) //this.element.getCoordinates()['left']
})
.inject(document.body)
.store('parent', this.element);
},

I\'m deeply sorry I still had the wrong code in my clipboard (fail!)

ghost: function(e) {
this.element = this.element.clone()
.setStyles({
\'opacity\': this.options.opacity,
\'position\': \'absolute\',
\'z-index\': 1000,
\'top\': ((e.page.y)-(this.element.getStyle(\'height\').toInt()/2)), //this.element.getCoordinates()[\'top\'],
\'left\': ((e.page.x)-(this.element.getStyle(\'width\').toInt()/2)) //this.element.getCoordinates()[\'left\']
})
.inject(document.body)
.store(\'parent\', this.element);
},

How can I make it so if I drag an item into one of the boxes it will delete the other item that was in there. Currently it adds it. So if you drag \"Drag Me #1\" into the first box and then drag \"Drag Me #2\" in the first box, \"Drag Me #1\" is removed.

Thanks in advance,

Nate

Your examples don't work correctly in ie8 the blue box doesn't drag just the text inside the blue box

worked very well with a small change::

ghost: function() {
var parent = this.element.getParent();
this.element = this.element.clone()
.setStyles({
'opacity': this.options.opacity,
'position': 'absolute'
})
.inject(parent)
.position({'relativeTo':this.element,'position':'topLeft'})
.store('parent', this.element);
},

If you need to have a link that's draggable, just use this kind of code:

$$('.drag').each(function(i,x,a){
new Drag.Ghost(i, {

droppables: '.drop',

onDrop: function(element, droppable, event){
if (droppable!=null&&droppable!=false) {
//here you write your events...
}
},

onEnter: function(element, droppable){
},

onLeave: function(element, droppable){
},

onBeforeStart: function(){
this.gofunc= function(){ return true; };
if (this.get('href')){
this.gofunc= function(){
location.assign(this.get('href'));
return false;
};
} else {
var a= this.getElement('a');
if (a!=null&&a.get('href')){
this.gofunc= function(){
location.assign(a.get('href'));
return false;
};
}
}
}.bind(i)
,onDrag: function(){
this.gofunc= function(){ return true; };
}.bind(i)
,onComplete: function(){
return this.gofunc();
}.bind(i)
,onCancel: function(){
return this.gofunc();
}.bind(i)
});

}
);

This is a part of my own function that has to control droppables for a cart- online shop where each product is a link that can be dropped on a cart icon. Sometimes we just need a draggable link(Let's imagine sth. like a destop with icons as a interface too.). The idea is pretty simple- if there is a click(onBeforeStart), we initialize a function to get the first href inside draggable(in my case items are divs with price tag,image, item title) and call it on button release(onCancel,onComplete). When dragged the link inits the function to return true only(this is to be able to call onDrop for the droppable). This works and is tested- you click and don't move more than options.snap and you have a link, you move and drag- you have a draggable. :)

Hi!
I worked in a version based in the ExtJs draggable, and modifing the Drag.Ghost script, i created this script to drag a element like a ghost, isn't the same appearence of ExtJs, this version is more quick of ! ;)

Drag.Ghost = new Class({

Extends: Drag.Move,

start: function(event) {
this.ghost();
this.parent(event);
},

cancel: function(event) {
if (event) this.deghost();
this.parent(event);
},

stop: function(event) {
this.deghost();
this.parent(event);
},

ghost: function() {

var el = this.element;

/* To previne IE6 Bugs */
var parent = this.element;

/* Save important data from selected element. To previne IE6 Bugs */
var top = el.getCoordinates()['top'];
var left = el.getCoordinates()['left'];
var height = el.getStyle('height');
var width = el.getStyle('width');

/* Hide the selected element */
this.element.setStyle('opacity' , '0.0');

/* Adding some styles to new 'ghost' item */
this.element = el.clone()
.setStyles({
'opacity': '1.0',
'position': 'absolute',
'top': top,
'left': left,
'border' : '2px dotted #D0D0D0',
'height' : height,
'width' : width
})
.inject(document.body)
.empty()
.set('html',' ')
.store('parent',parent);
},

deghost: function() {
var e = this.element.retrieve('parent');
var top = this.element.getCoordinates()['top'];
var left = this.element.getCoordinates()['left'];
this.element.destroy();
this.element = e;

/* Set coordenates and some style of a retrieved element */
e.setStyles({
'top': top,
'left': left,
'opacity' : '1.0'
});

}
});

Element.implement({
makeGhostDraggable: function(options) {
return new Drag.Ghost(this, options);
}
});