[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?

[99caos]

Ho scoperto che c'è un altro JS che interferisce con il codice.
Serve per generare la data.

ecco il codice html:

        <script language="JavaScript" src="data.js" type="text/javascript"></script>
        <span id="clock" onLoad="goforit()"></span> 

ecco il contenuto del file:

var dayarray=new Array("Domenica","Lunedi","Martedi","Mercoledi","Giovedi","Venerdi","Sabato")
var montharray=new Array("Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre")

function getthedate(){
    var mydate=new Date()
    var year=mydate.getYear()

    if (year < 1000)
    year+=1900

    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()

    if (daym<10)
    daym="0"+daym

    var hours=mydate.getHours()
    var minutes=mydate.getMinutes()
    var seconds=mydate.getSeconds()
    var dn="AM"

    if (hours>=12)
    dn="PM"

    if (hours>12){
        hours=hours-12
    }

    if (hours==0)
    hours=12

    if (minutes<=9)
    minutes="0"+minutes

    if (seconds<=9)
    seconds="0"+seconds

    //change font size here
    var cdate=dayarray[day]+", "+daym+" "+montharray[month]+", "+year+" "+hours+":"+minutes+" "+dn

    if (document.all)
    document.all.clock.innerHTML=cdate

    else if (document.getElementById)
    document.getElementById("clock").innerHTML=cdate
    else
    document.write(cdate)

}

if (!document.all&&!document.getElementById)
getthedate()

function goforit(){
    if (document.all||document.getElementById)
    setInterval("getthedate()",1000)
} 

non capisco però come mai influenzi il mio script...