Drop Zones onHover Highlighting

[royrusso]

After talking with Thomas Fuchs, he sent me a patch that was sent to
him by a community member, that allows having a dropmarker placed
onHover, much like netvibes does:
--------------------
I have made two changes to the latest (publicly released) file called
"dragdrop.js" of the scriptaculous library.

Change 1:
I have made one change in the Sortables "onHover" function, i have
moved the mark and umark calls to after the check if the element is
changed, which gives the following code. If i didn't make this change,
the area was marked even though the drop area wasn't changed to an
empty space yet.

onHover: function(element, dropon, overlap) {
if(overlap>0.5) {
if(dropon.previousSibling != element) {
Sortable.mark(dropon, 'before');
var oldParentNode = element.parentNode;
element.style.visibility = "hidden"; // fix gecko rendering
dropon.parentNode.insertBefore(element, dropon);
if(dropon.parentNode!=oldParentNode)
Sortable.options(oldParentNode).onChange(element);
Sortable.options(dropon.parentNode).onChange(element);
}
} else {
var nextElement = dropon.nextSibling || null;
if(nextElement != element) {
Sortable.mark(dropon, 'after');
var oldParentNode = element.parentNode;
element.style.visibility = "hidden"; // fix gecko rendering
dropon.parentNode.insertBefore(element, nextElement);
if(dropon.parentNode!=oldParentNode)
Sortable.options(oldParentNode).onChange(element);
Sortable.options(dropon.parentNode).onChange(element);
}
}
},

Change 2:
The mark function. I changed this function so it is allways called. The
only difference in ghosting and non-ghosting is that when you don't
ghost, like in my example, you will see the dropmarker in full width
and height.

mark: function(dropon, position) {
// always mark, see further down
var sortable = Sortable.options(dropon.parentNode);

if(!Sortable._marker) {
Sortable._marker = $('dropmarker') ||
document.createElement('DIV');
Element.hide(Sortable._marker);
Element.addClassName(Sortable._marker, 'dropmarker');
Sortable._marker.style.position = 'absolute';

document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
}
var offsets = Position.cumulativeOffset(dropon);
Sortable._marker.style.left = offsets[0] + 'px';
Sortable._marker.style.top = offsets[1] + 'px';

//
// If we are not ghosting, we should show the dropmarker in full
width and height of the element
if (!sortable.ghosting) {
Sortable._marker.style.width = dropon.clientWidth+'px';
Sortable._marker.style.height = dropon.clientHeight+'px';
} else {
if(position=='after')
if(sortable.overlap == 'horizontal')
Sortable._marker.style.left = (offsets[0]+dropon.clientWidth)
+ 'px';
else
Sortable._marker.style.top = (offsets[1]+dropon.clientHeight)
+ 'px';
}
Element.show(Sortable._marker);
},

Any comments are appreciated and credit also :)

Regards,

Gilles vd Hoven

---------------------

I have been playing with the script so far. It doesn't seem to do
anything regardless of what you define your dropmarker selector in CSS
to be in Win IE. Seems to work in FF.

My case may be a special one, as I am trying to sort divs and not
lists, so the dropmarker sizes with the above hacks, overlap currently.
I'm assuming this should work for lists just fine.

Regards,
Roy Russo

[tan...@gmail.com]

Here is my solution to this problem, you might want to have a look

http://tanrikut.blogspot.com/2006/09/scriptaculous-patch.html

Tankut Koray

[royrusso]

Tankut, Thanks. I will have a look at it and let you know if it works
any better than the before-mentioned changes.

PS. May also be a good idea, to add it to,
http://dev.rubyonrails.org/ticket/2992, or the scriptaculous wiki.

Regards,
Roy Russo
JBoss Portal Developer

[tan...@gmail.com]

I had added to the ticket but not to wiki. I will also add it there

Tankut

[royrusso]

Tried posting to your blog, seems like the onEmpyHover you have on
there is very different from the one packaged in 1.6.4. Did you
document all changes you made?

Seems like browsers don't like the onEmptyHover you have on there.

[royrusso]

ok... so for onEmptyHover, what I have working with your changes is the
following:

onEmptyHover: function(element, dropon, overlap) {
var oldParentNode = element.parentNode;
var droponOptions = Sortable.options(dropon);

if(!Element.isParent(dropon, element)) {
var index;

var children = Sortable.findElements(dropon, {tag:
droponOptions.tag, only: droponOptions.only});
var child = null;

if(children) {
var offset = Element.offsetSize(dropon, droponOptions.overlap)
* (1.0 - overlap);

for (index = 0; index < children.length; index += 1) {
if (offset - Element.offsetSize (children[index],
droponOptions.overlap) >= 0) {
offset -= Element.offsetSize (children[index],
droponOptions.overlap);
} else if (offset - (Element.offsetSize (children[index],
droponOptions.overlap) / 2) >= 0) {
child = index + 1 < children.length ? children[index + 1] :
null;
style = "color: rgb(255, 0, 0);" >
Sortable.createGuide(element);
dropon.insertBefore(element, child);
dropon.insertBefore(Sortable._guide, element);
Sortable.markEmptyPlace(element);
Sortable.options(oldParentNode).onChange(element);
droponOptions.onChange(element);
break;
} else {
child = children[index];
break;
}
}
}

[Tankut Koray]

Hi,

Yes you are right that my onEmptyHover function doesnt work because it
is somehow scrambled while pasting in blog. So I updated the blog. I
only added those three red lines so if you insert them into the
original script you should get it working.

[royrusso]

Yep. What you have now, is perfect.

Thanks Tankut!

[Tankut Koray]

Thanks:)

[Jerod Venema]

Anyone have a working example of this?

[The Manhatten Project]

Can someone post an already altered dragdrop.js file? even better still
an addition to the Treasure Chest? :-) The blog is a good read but a
final .js file is what it is missing. Thanks Tankut, great work ( when
I see it working!)

[tan...@gmail.com]

Hi,

Finally with the help of my friend Sinan, here is the link to final .js
file:

http://sinan.ussakli.net/script/script/dragdrop.js

And here is the example:

http://sinan.ussakli.net/script/

Tankut

[Tony Gray]

Excellent! It works perfect in FireFox but acts goofy in IE6. Anybody else seeing that?

[Tankut Koray]

Hi Tony,

Actually there is a problem in FF also. The right element is moving to
right mode than expected. in IE it is move down.

There is a problem of margin copied to Sortable._guide. So I updated
the script so that element's margin is now copied to the
Sortable._emptyPlaceMarker.

Anyway, final script is attached and example page will be updated soon.

Tankut