Not sure I understood what I'm supossed to set.
Wehn you say reset the positioning after the dragged element is
appended, how should I do this ?
When you say setting the position to static should do, do you mean set
the css option position: static, on the draggable div ? If this is the
case, I tried it but still got the same behavior (dropping elements
one under the under).
On Aug 30, 8:41 am, Scott González <[EMAIL PROTECTED]> wrote:
> 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 objectsideby
>
> ...
>
> read more »
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
