Hi Scott.
Maybe I'm doing something wrong then.
Here is my html file:
--------------------------------------------------
<html>
<head>
<style>
div{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
}
div.report{
width: 600px;
height: 600px;
border-style: solid;
border-width: 1px;
vertical-align: middle;
}
div.reportGroup{
height: 100px;
border-bottom-width: 1px;
border-bottom-style: dashed;
}
div.status{
border-style: solid;
border-width: 1px;
text-align: left;
vertical-align: top;
width: 100%;
height: 100%;
}
div.grippie {
background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
border-color:#DDDDDD;
border-style:solid;
border-width:0pt 1px 1px;
cursor:s-resize;
height:9px;
overflow:hidden;
}
div.fields{
border-style: solid;
border-width: 1px;
width: 100%;
height: 100%;
vertical-align: top;
}
div.textField{
width: 100px;
height: 18px;
border-style: solid;
border-width: 1px;
cursor:move;
padding: 0px;
margin: 3px;
background-color: white;
}
.droppable-active {
opacity: 1.0;
}
.droppable-hover {
outline: 1px dotted black;
}
</style>
<script type="text/javascript" src="javascripts/jquery/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="javascripts/jquery/jquery-ui-
personalized-1.6b.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function status(){
divStatus = document.getElementById('statusObj');
headerInnerHtml = 'Info<hr>';
divStatus.innerHTML = headerInnerHtml;
passCoordsToDiv('textField1');
passCoordsToDiv('reportGroup1');
passCoordsToDiv('reportGroup2');
passCoordsToDiv('reportGroup3');
passCoordsToDiv('reportGroup4');
passCoordsToDiv('reportGroup5');
}
function passCoordsToDiv(divId, coord){
coord = getCoords(document.getElementById(divId));
setDivStatusInnerHtml( document.getElementById(divId).id,
coord.width,
coord.height,
coord.x,
coord.y);
}
function setDivStatusInnerHtml(divName, divWidth, divHeight, divX,
divY){
divStatus = document.getElementById('statusObj');
innerHtml = divStatus.innerHTML;
innerHtml += '<br><b>Div Id: </b><i>'+divName+'</i>'+
' <b>Div Width:
</b><i>'+divWidth+'px </i>'+
' <b>Div Height:
</b><i>'+divHeight+'px </i>'+
' <b>Div X: </b><i>'+divX+'</i>'+
' <b>Div Y:
</b><i>'+divY+'</i><BR>';
divStatus.innerHTML = innerHtml;
}
function getCoords (element) {
var coords = { x: 0, y: 0, width: element.offsetWidth, height:
element.offsetHeight };
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
function init(){
initGroup(".reportGroup");
initDroppable("#reportGroup1");
initDroppable("#fieldsDiv");
initDrags(".textField");
}
function initGroup(groupName){
$(groupName).resizable({
handles: "s",
minHeight: 20
});
}
function initDrags(dragName){
$(dragName).draggable({
helper: 'clone',
grid: [5,5],
opacity: 10,
revert: 'invalid'
});
}
function initDroppable(dropName){
$(dropName).droppable({
accept: ".textField",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
ui.draggable.fadeOut( "fast",
function() {
$(this).fadeIn("fast")
}).appendTo($(this));
}
});
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="20%" valign="top">
<div id='fieldsDiv' class='fields'>
<div id='textField1' class='textField'>Text
Field 1</div>
<div id='textField2' class='textField'>Text
Field 2</div>
<div id='textField3' class='textField'>Text
Field 3</div>
<div id='textField4' class='textField'>Text
Field 4</div>
<div id='textField5' class='textField'>Text
Field 5</div>
<div id='textField6' class='textField'>Text
Field 6</div>
<div id='textField7' class='textField'>Text
Field 7</div>
<div id='textField8' class='textField'>Text
Field 8</div>
<div id='textField9' class='textField'>Text
Field 9</div>
</div>
</td>
<td width="40%">
<div id='reportDiv' class='report'>
<div id='reportGroup1'
class='reportGroup'>Group1</div>
<div id='reportGroup2'
class='reportGroup'>Group2</div>
<div id='reportGroup3'
class='reportGroup'>Group3</div>
<div id='reportGroup4'
class='reportGroup'>Group4</div>
<div id='reportGroup5'
class='reportGroup'>Group5</div>
</div>
</td>
<td width="40%" valign="top">
<div id="statusObj"
class='status'>Info<hr></div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" onclick="status()"
value="status">
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------
The javascript libraries I'm using are:
jquery-1.2.6.js
jquery-ui-personalized-1.6b.js // This has the whole jquery ui
package.
They need to be in a subfolder javascripts/jquery/. Or just change the
reference of the <script> tag.
If you can´t run this example, let me know and I'll try to put it
online somewhere.
Thanks a lot for your response.
Sincerely,
John.
On Aug 29, 7:35 am, Scott González <[EMAIL PROTECTED]> wrote:
> There is no limitation to where you can drop your draggables (assuming
> you're in a valid drop location). The draggable will stay wherever
> you drop it, so I don't understand what problem you're running into.
>
> On Aug 28, 2:20 pm, jcharnet <[EMAIL PROTECTED]> wrote:
>
> > Hello.
> > Is it possible to drop a draggable object side by side in a droppable
> > area ?
> > The default behavior is to put each draggable object one under the
> > other.
> > Ex:
> > Drag 1
> > Drag 2
> > Drag 3
>
> > I'd like to be able to put my draggable object in any place of the
> > droppable area. To the side, under, and so on.
> > Ex:
>
> > Drag1 Drag 2
> > Drag3
>
> > Can I achieve this ?
>
> > Thanks a lot.
>
> > Sincerely,
>
> > John
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
