#246 new
srinath

Drag and Drop overflow auto

Reported by srinath | October 8th, 2009 @ 08:57 AM

Hi all,
I am trying to create a web app that will let you drag
items from a left pane to a right pane. These panes must have
overflow: auto on because there will definitely be more data in them
than can fit in the provided space. The problem is that when overflow
is set to auto, the div expands when the draggable object reaches the
extents instead of the object existing outside that div while being
dragged.
I want to drag an item from left pane and drop on right pane target div.
This is not working when using overflow:auto, as the item is going under right pane and not visible .
This is my code :

LeftPane {

width: 150px; / optional, initial splitbar position /
margin: 10px 0px 10px 10px;
background: #ffffff;
border: #b6b6b6 1px solid;
overflow:auto;
}

LeftPane li.sorting {

float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
}

LeftPane li.sorting:hover {

float: left;
margin: 4px;
padding: 4px;
border: 1px solid #666;
cursor: move;
} /* Right-side element of the splitter. /

RightPane {

float:right;
width:271px;
margin: 10px 10px 10px 0px;
background: #ffffff;
border: #b6b6b6 1px solid;
}

thanks,
sri..

Comments and changes to this ticket

  • nicolas

    nicolas June 18th, 2010 @ 09:23 AM

    Hi,

    Here is what I wrote to have it running under IE 8.0.6 & Firefox 3.6.3:

    Make draggable the elements (with border) in the "width:100px;overflow:auto" container:
    function makeDraggable(container,tag) {

    if(!container || !tag) { return false; }
    $(container).select(tag).each( function(o) { new Draggable(o,{

    starteffect: function(e){makeDragVisible(container,e);},
    endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
    zindex: 1000
    // , revert: ... // the other options
    

    }); });

    }

    function makeDragVisible(container,element) {

    if(!container || !element) { return false; }
    var i=$(container).getStyle('width');
    i=i.replace('px','');
    i=Math.round(i-20)+'px';
    element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});
    // $(container).setStyle({});

    }

    Important notes: (1) the z-index is repeated (2) notice the container loss of style at the end of 'starteffect'. Cursor and width are simply there to keep the drag user friendly.

    I hope it helps.

    Yours,
    Nicolas

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Attachments

Pages