February 7, 2008

Scriptaculous 1.8.1 Patched

I finally patched scriptaculous 1.8.1. You can download all of the script with my changes in dragdrop.js from http://tankut.googlepages.com/home.

Also please note that, there was a bug in IE with absolutely positioned elements. The bug is fixed (see my ticket) and but applied after 1.8.1. It will be in the next release of scriptaculous but I applied the fix in my patch.

So anyone using this patch anymore? Please leave some comments also if anyone can test this on IE6 that will be nice.

21 comments:

Boro said...

I'm still using it :)

Sadly, it still behaves kind of quirky on IE 6 (damn you ie, damn you), because the emptyPlaceMarker shows up a little off from where the original element was.

Tankut Koray said...

Great to hear that you are using this:)

Do you have margin or padding in the orginal element? That can cause this. If you can give url, I can look and possibly debug that.

Christine said...
This comment has been removed by the author.
Christine said...

I love it.

However it also has margin problem in Firefox the marker box is more left and top than the original location. I test it on v1.5 and v2

Here is my script:
<style type="text/css" media="screen">
.yui-u { width: 32%; list-style-type: none; margin:0; padding: 0; float:left;}
.yui-u li { margin: 20px; border: 1px solid #4f6d81;}
span.handle { display:block; color:#355468; cursor: move; background: url(blue_header.gif) transparent repeat-x; padding-left: 5px; }

.emptyPlaceMarker
{
z-index: 2;
border: 2px dashed #cccccc;
background-color: Transparent;
}

</style>

<div id="t_1" class="yui-gb">
<ul id="c1" class="yui-u">
<li id="c1_firstlist1">
<span class="handle">DRAG HERE</span> Item 1 from c1 list.
</li>
<li id="c1_firstlist2">
<span class="handle">DRAG HERE</span> Item 2 from c1 list.
</li>
<li id="c1_firstlist3">
<span class="handle">DRAG HERE</span> Item 3 from c1 list.
</li>
</ul>
<ul id="c2" class="yui-u">
<li id="c2_secondlist1">
<span class="handle">DRAG HERE</span> Item 1 from c2 list.
</li>
<li id="c2_secondlist2">
<span class="handle">DRAG HERE</span> Item 2 from c2 list.
</li>
<li id="c2_secondlist3">
<span class="handle">DRAG HERE</span> Item 3 from c2 list.
</li>
</ul>
<ul id="c3" class="yui-u">
<li id="c3_thirdlist1">
<span class="handle">DRAG HERE</span> Item 1 from c3 list.
</li>
<li id="c3_thirdlist2">
<span class="handle">DRAG HERE</span> Item 2 from c3 list.
</li>
<li id="c3_thirdlist3">
<span class="handle">DRAG HERE</span> Item 3 from c3 list.
</li>
</ul>
</div>


<hr style="clear:both" />

<pre id="c1_debug"></pre>
<pre id="c2_debug"></pre>
<pre id="c3_debug"></pre>


<script type="text/javascript">
// <![CDATA[

Sortable.create("c1",
{dropOnEmpty:true,handle:'handle',containment:["c1","c2","c3"],constraint:false,markDropZone:true,
onChange:function(){$('c1_debug').innerHTML = Sortable.serialize('c1') }});

Sortable.create("c2",
{dropOnEmpty:true,handle:'handle',containment:["c1","c2","c3"],constraint:false,markDropZone:true,
onUpdate:function(){$('c2_debug').innerHTML = Sortable.serialize('c2') }});

Sortable.create("c3",
{dropOnEmpty:true,handle:'handle',containment:["c1","c2","c3"],constraint:false,markDropZone:true,
onChange:function(){$('c3_debug').innerHTML = Sortable.serialize('c3') }});

// ]]>
</script>

Tankut Koray said...

Hi Christine,


It is good to know you liked my patch:)

I investigated your problem and it seems that li items are acting weird such as they are not reporting their 'margin' values correctly. In FF, li element is reporting its margin as empty whereas it is 20px. You can see 20px applying to li in firebug but in javascript is not giving that value.

Well, in IE7 margin is reported correctly and marker seems to be in right place. But I noticed that li margins are acting differently that div margins: when you have 2 divs with margin:20px, that means you will have 40px between them. But it seems that li margin:20px makes 20px between them. So in IE7, because I use divs in my patch, drop zone marker have more margin, making it look larger than it should occupy.

As I always suggest, 'ul's and 'li's are evil and please use 'div's instead of ul's and li's.

joe khoobyar said...

We're using it for some of the DND in the upcoming Groupsites 2.0 on CollectiveX. Great work - if we don't need custom drag-and-drop and we just want drag markers it works very well. For when Sortable is not an option, however, we have our own solution.

Our current site doesn't use this yet - our new release (of which this is a small but useful piece) will be going live "Anytime Now" (tm)

Tom said...

Hi, I found your patch an hour ago and I love it, it solves exactly my problem. Well mostly...

I use it somewhat different... I change (well disable) one line in your patch:

// Sortable._guide.style.height = '0px'

And add this to my css-file:

#guide {
height: 22px;
background-color: #dd0000;
}

This works great in firefox3, but nothing happens in IE7 ... as expected. ;-) I hope to find a solution soon, thank you for the patch.

Anonymous said...

I really like the patch it has been working like a charm at least in IE. However when I am in FF3 the placemarker shows up only in the third sortable on my page out of three. Any ideas what is wrong? I can send you the source code if that would help.

Tankut Koray said...

Well send me your code than maybe I can help you.

Anonymous said...

Thanks alot. Also fixes some strange behaviour/bug in Internet Explorer 6 where draggables get torn all over the page...

Anonymous said...

Still using this! Thanks for all your hard work.

Anant Panchal said...

Hi Tankut ,
Thanks for this update.

i have one query if you can favor me ?

in sortable tree there is no control for expanding and collapsing of child nodes ?

is there any possibilities for this control?

please reply
Anant

Tankut Koray said...

Hi Anant,

My update does not handle that but I guess you can do something like that by toggle chidlren's display css attibute to 'none' or ''.

Tankut

Anant Panchal said...

Hi Tankut

I have implemented expand/collpase control in sortable tree.

My tree looks like :
<ul id="parent_ul">
<li>Parent
<ul id="child_ul"><li>Child</li></ul>
</li>
</ul>

What i have done is when i Expand subtree then "child_ul" property display:block; is set and for collapse property display:none; is set.

now what happens is, in collapsed mode when i try to drop element in subtree it shows no drop zone and element is not dropping.

please help me to find the solution or give an alternate solution if you have in mind.

Thanks
Anant

Oatlab.com Official Blog said...

I may use it. I'm about to download for the first time. If I do, I will testing in ie6.

Miches said...

additional patch:

using 1.8.1:
- ghosting: false

the problem is IE7 puts the marker on top of the draggables, which is really annoying. I investigated the patched code, and added this line:

/* patched by Miches (miches@hostsofa.com) */
Sortable._emptyPlaceMarker.style.zIndex = -1;

It may not be a really elegant solution for now, but hope this will help anyone running into the same problem.

Nice work Tankut!

Cheers!
- Miches

Ben said...

Hi,

in Firefox it works fine, but in IE 7 - damn - nothing happens.

what can i do?

HostRail said...

How can I get the element id of a Sortable item after I drop it from
another Sortable?

Sortable.create(this,{constraint:false,containment:false,dropOnEmpty:true,onUpdate:function(list){ alert(dropzone); }});

How can I get the ID of where it is dropped????
Any help on this would be awesome

Paul said...

Not sure if you are still checking this post, but I am new to the sortable and scriptaculous code and have an issue maybe you have encountered?

I am running 1.8.2 and not sure if your patch would have anything to do with my problem.

My code and issue is at:

http://www.paulwesson.com/sortable/

If you can help that would be great!

Mellonedain said...

Hi!

I use you patched library, but I have latest version (1.8.1). How it looks on newest 1.8.3?

I have one things more todo in patched. Sortables can't use "accept" option. Of course I added it to my code, but this still isn't supported. Your patches too.

Hans said...

Thanks for your posts, they are very helpful.

In FireFox/Chrome, when you drag a DIV with an IFRAME inside, the browser constantly reloads the IFRAME. In IE, it does not. I would prefer that it did not reload the iframe over and over while dragging. Everything else works fine.

Do you have any thoughts? If you do, I would appreciate it.