[Help] Finestre Drag&Drop by cross-browser.com

[99caos]

Volevo applicare ad un mio sito le finestre trascinabili (e ridimensionabili).

Ho trovato le librerie Open Source di Cross-Browser.com

Molto interessanti.

Innanzi tutto volevo capire quanto fossero Cross-Browser.

Poi volevo capire perchè non mi funzionano sul mio layout.

Vi posto il link all'esempio riportato sul sito:

Esempio

Questo funziona.

Ma se lo applico al mio layout non funziona più e non so come fare il debbug...

<div name="Left" id="Left" style="position:absolute; visibility:visible; z-index:1; width:160px; height:auto; left:20px; top:55px;">

        <div class="win_header">
            <div class="win_header_left"></div>
            <div class="win_header_title"><div class ="LeftBar">Menu</div></div>
            <div class="win_header_hide">[url="#"][/url]</div>
            <div class="win_header_close">[url="#"][/url]</div>
        </div>

        <div style="clear:both;height:0px;font-size:0px"></div>

        <div class="win_content">
             Bla bla bla
        </div>

        <div class="win_footer">
            <div class="win_footer_left"></div>
            <div class="win_footer_middle"></div>
            <div class="win_footer_right"></div>
        </div>

        <div style="clear:both;height:0px;font-size:0px"></div>

    </div>

il css è questo:

#Left {
    position:absolute;
    visibility:visible;
    z-index:100;
    width:160px; 
    height:auto;
    left:20px;
    top:55px;
}

.win_header div, .win_footer div {
    height: 24px;
    width: 24px;
    float: left;
    text-align: center;
    line-height: 24px;
    color: #fff;
    font-weight: bold;
}

.win_footer div {
    height: 31px;
}

.win_header a {
    display: block;
    width: 20px;
    height: 24px;
}

div.win_content {
    background: #f8f5f2;
    margin: 0 5px 0 5px;
    border: 1px solid #6A6A6A;
    border-bottom: 0;

}
.win_header_title a {
    display: inline;
    text-align: left;
    margin: 0;
    width: 300px;
}
#Left div.win_header_title {
    width: 88px;
}
#Left div.win_footer_middle {
    width: 112px;
} 

Questa è la versione del codice js che uso per il mio sito:

var highZ = 1;

window.onload = function()
{
  d2Setup();

}

function d2Setup()
{
  xMoveTo('Left', 200, 350);
  xEnableDrag('LeftBar', d2OnDragStart, d2OnDrag, null);
  xHide('Left');
}
function d2OnDragStart(ele, mx, my)
{
  xZIndex('Left', highZ++);
}
function d2OnDrag(ele, mdx, mdy)
{
  xMoveTo('Left', xLeft('Left') + mdx, xTop('Left') + mdy);
} 

il sito delle librerie porta pure una documentazione.

Funzione xmoveto()

in questa pagina vengono spiegati i parametri.

In particolare il primo parametro è indicato come: id string or object reference

qui mi sorge un dubbio...
gli esempi portati dal sito fanno riferimento ad una classe (.demoBox)
mentre io uso gli id (#Left)

Premetto che ho provato anche con le classi...

Qualcuno ci capisce più di me?