Without running that, my guess is that you need to reset the
positioning of the dragged elements after appending them to the
droppable. The draggable plugin modifies the positioning of the
element so that it can move around on the page, so the two elements
that you've dragged will both have very similar positioning applied to
them. Setting the position to static should do what you want.
On Aug 29, 8:23 am, jcharnet <[EMAIL PROTECTED]> wrote:
> 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 [email protected]
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
-~----------~----~----~----~------~----~------~--~---
