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.

Sciptaculous 1.8.0 patched (also ghosting fixed:))

Hi Everyone,

Thanks for your support and encouragement. My code is probably ugly and I don't know if I could have time to polish it. But as there are requests, I will try to have this patch to official script. At least I will submit a PATCH to RailsTrac with diff info.

Anyway, while I was working on patching 1.8.0, I think I find a bug:((. See my ticket at http://dev.rubyonrails.org/ticket/10423

Please test my example.html page with IE7 and IE6 and let me know if you got the same error.

Among that, I finally patched 1.8.0 and also hopefully my patch is now working with ghosting. Also now patch contains Gavin Dibley contribution of 'dropZoneCss' property. (see inline comments) I call this is a beta version, because I hope you people will test and report bugs and I also I have my own TODO comments (some in Turkish, sorry)

So finally, please find the whole script zip in http://tankut.googlepages.com/home
(note: only dragdrop.js changed and other files are the same as original script)

I am looking for your comments,
Tankut

Scriptaculous 1.7.1 Beta 3 Repatched

Hi Everybody,

I added an attribute to "Sortable" so that you can turn off to show dropzone marker. (That is the original behaviour of the script.) Default of markDropZone attribute is true and you can turn it off by assigning false. (Thanks to Ben for asking for this attribute)

Example:
Sortable.create('Layer1',{tag:'div',dropOnEmpty: true, overlap:'horizontal',constraint:false, markDropZone:false});

Bugfix: I also got error in IE7 when you dont have margins and I think I solved it.

Also I realised the patch is not marking correctly when ghosting:true. So please do not use ghosting until I solve this problem.

You can find it here: http://tankut.googlepages.com/patched-scriptaculous-v2-1.7.1_beta3.zip

Waiting for your comments,
Tankut,

Scriptaculous 1.7.1_beta3 patched

You can find here:

http://tankut.googlepages.com/patched-scriptaculous-js-1.7.1_beta3.zip

Works with prototype 1.5.1 final release as it is included with scriptaculous.

But some previous bugs remains(look at test1.htm and test2.htm[thanks chamnap])

Hopefully I will fix these,
Tankut

Finally I patched 1.7.0 (revised)

Hi everybody,

I have been receiving comments for the patched 1.7.0 version. Finall, I patched it.:)

Bugfixed version is here: http://tankut.googlepages.com/patched1.1-scriptaculous-js-1.7.0.zip
First version is here: http://tankut.googlepages.com/patched-scriptaculous-js-1.7.0.zip

Any comments are welcome, (also please let me know if you are using this patch in your pages)

Tankut

Scriptaculous 1.7.0 released

Today, I noticed a new version of scriptaculous (1.7.0) released, which includes new prototype version(1.5). Get it from http://script.aculo.us/

I will patch this version soon.

Update for Scriptaculous 1.6.5

Finally I updated to new version of scriptaculous 1.6.5. Both 1.6.4 and 1.6.5 patched versions (including an example) can be downloaded from:

http://tankut.googlepages.com/home

Tankut

Scriptaculous and Atlas

When I tried to use scriptaculous and Atlas in the same .aspx page, I saw that scriptaculous methods (for example Ajax.Updater,Form.serialize) does work correctly correctly.

I find out that Atlas has its own $() function which is overridden the scriptaculous's own $() function.

One ugly but quick fix is to rename $() function in scriptaculuous to something else like $$$(). But remember to change all references in scriptaculuous scripts to use this function.

A good solution seems to be remove $() function in Atlas as $() function in scriptaculuous is doing the same and a bit more. but I dont know how to modify Atlas script(actually I dont want to change it).

Maybe someone has a more elegant solution?

Scriptaculous Patch

If you are using scriptaculous script and its sortables for drag and drop in your web pages, you may realizied that you can have only an empty space where you will drop your dragging element. Here I will explain how you can have a div with a custom style so that you can a box that will mark where you will drop you element.

Here I am patching scriptaculous script 1.6.4 and I tested final script with FF 1.5 and IE 6. All the changes I will make is in the dragdrop.js that is coming with scriptaculous and I will modify Sortable class in the script.

Lets start with adding two new methods to Sortable class; createGuide and markEmptyPlace methods

createGuide : function (element) {
if(!Sortable._guide) {
  Sortable._guide = $('_guide') || document.createElement('DIV');
  Sortable._guide.style.position = 'relative';
  Sortable._guide.style.width = '1px';
  Sortable._guide.style.height = '0px';
  Sortable._guide.style.cssFloat = 'left';
  Sortable._guide.id = 'guide';

  document.getElementsByTagName("body").item(0).appendChild(Sortable._guide);
}

This createGuide method will create a div with 0px height and 1 px width so that it wont be visible. I will insert this div before the real element that we are dragging. After inserting, I will calculate its absolute position and move my marker div (which I will create in markEmptyPlace method) there. Here is a trick that I am copying dragging elements margins which will affect absolute position. markEmptyPlace method looks like this:

markEmptyPlace: function(element) {

if(!Sortable._emptyPlaceMarker) {
Sortable._emptyPlaceMarker = $('emptyPlaceMarker') || document.createElement('DIV');
Element.hide(Sortable._emptyPlaceMarker);
Element.addClassName(Sortable._emptyPlaceMarker, 'emptyPlaceMarker');
Sortable._emptyPlaceMarker.style.position = 'absolute';
document.getElementsByTagName("body").item(0).appendChild(Sortable._emptyPlaceMarker);
}

var pos = Position.cumulativeOffset(Sortable._guide);
Sortable._emptyPlaceMarker.style.left = (pos[0] + 5)+ 'px';
Sortable._emptyPlaceMarker.style.top = (pos[1] + 5) + 'px';

 var dim = {};
 dim.width = (Element.getDimensions(element).width-5) + 'px';
 dim.height = (Element.getDimensions(element).height-5) + 'px';
 Sortable._emptyPlaceMarker.setStyle(dim);
    
 var mg = Element.getStyle(element, 'margin');
 if(mg && mg != '') {
   Sortable._emptyPlaceMarker.setStyle({margin : mg});
 } else  {
   Sortable._emptyPlaceMarker.setStyle({ margin : ''});
 }    

Element.show(Sortable._emptyPlaceMarker);
},

Here I am calculating marker div's position by using guide div's position. Than I am making the marker div's size equal to the dragging element's size. +5 and -5 in calculations are there so that I have a slightly smaller box. Also it is important that this div is attached to a css class named as 'emptyPlaceMarker' so you need to have such a css class defined. Here is my emptyPlaceMarker css:

.emptyPlaceMarker
{
border-right: red thin dashed;
border-top: red thin dashed;
border-left: red thin dashed;
border-bottom: red thin dashed;
background-color: Transparent;
}

So we have our methods ready for creating necessary divs. Now lets use them. In scriptaculous, there are two methods used while dragging: onHover and onEmptyHover. onHover is called when you are hovering on another draggable element and onEmptyHover is called when you are hovering over an empty place in droppable. These methods are inserting the dragging element into a droppable as a child. So I modified these methods so that I will insert my guide before the dragging element in the child list. Here are the modified onHover and onEmptyHover methods; (red lines are the lines that I added)

 onHover: function(element, dropon, overlap) {
  if(Element.isParent(dropon, element)) return;

  if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
    return;
  } else if(overlap>0.5) {
    Sortable.mark(dropon, 'before');
    if(dropon.previousSibling != element) {
      var oldParentNode = element.parentNode;
      element.style.visibility = "hidden"; // fix gecko rendering
    
      Sortable.createGuide(element);
      dropon.parentNode.insertBefore(element, dropon);
      dropon.parentNode.insertBefore(Sortable._guide, element);
        Sortable.markEmptyPlace(element);
    
      if(dropon.parentNode!=oldParentNode)
        Sortable.options(oldParentNode).onChange(element);
      Sortable.options(dropon.parentNode).onChange(element);
    }
  } else {
    Sortable.mark(dropon, 'after');
    var nextElement = dropon.nextSibling || null;
    
    if(nextElement != element) {
      var oldParentNode = element.parentNode;
      element.style.visibility = "hidden"; // fix gecko rendering
    
      Sortable.createGuide(element);
      dropon.parentNode.insertBefore(element, nextElement);
      dropon.parentNode.insertBefore(Sortable._guide, element);
        Sortable.markEmptyPlace(element);
    
      if(dropon.parentNode!=oldParentNode)
        Sortable.options(oldParentNode).onChange(element);
      Sortable.options(dropon.parentNode).onChange(element);
    }
  }
},

   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;
            break;
          } else {
            child = children[index];
            break;
          }
        }
      }
    Sortable.createGuide(element);
    dropon.insertBefore(element, child);
    dropon.insertBefore(Sortable._guide, element);
      Sortable.markEmptyPlace(element);
  
    Sortable.options(oldParentNode).onChange(element);
    droponOptions.onChange(element);
  }
},

As a final touch, I updated the unmark method so that after dragging ends, I will hide the marker and remove the guide from droppables child list:

unmark: function() {
if(Sortable._marker) Element.hide(Sortable._marker);
  if(Sortable._guide && Sortable._guide.parentNode){
Sortable._guide.parentNode.removeChild(Sortable._guide);
}
if(Sortable._emptyPlaceMarker) Element.hide(Sortable._emptyPlaceMarker);
},

After making these changes to your dragdrop.js and have a 'emptyPlaceMarker' css class defined, you will be able to have a box that will mark where you will drop your dragging element.

Tankut Koray