Thema: Kapitel 7.2.1 Drag&Drop Beispiel

Hallo,

habe gerade das Drag&Drop Beispiel mit der Library script.aculo.us ausprobiert. Leider hab ich es nicht geschaft das sich irgendetwas bewegt. Woran kann das liegen? Die Library hab ich natürlich runtergeladen.
Hier mein derzeitiger Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>script.aculo.us</title>
    <script src="lib/prototype.js" type="text/javascript"></script>
    <script src="src/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    onload=function()
    {
        d = new Draggable(
            'bsp',
            {
                change:check,
                handle:innen
            }
    );
    }
    var check = function()
    {
        if (parseInt($('bsp').style.left) >= 300)
        {
            this.constraint = 'vertical';
        }
        if (parseInt($('bsp').style.top) >= 400)
        {
            d.destroy();
        }
    }
    //]]>
    </script>
</head>
<body>
    <div id="bsp" style="position:absolute;color:#ff0000;">
        <pre>
            + ------ +
            |        |
            |        |
            + ------ <span id="innen" style="color:#0000ff;">+</span>
        </pre>
    </div>
</body>
</html>

Was mache ich falsch?

vG
Doris

2

Re: Kapitel 7.2.1 Drag&Drop Beispiel

Hi Doris,

Du mußt das "handle" in Anführungszeichen setzen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>script.aculo.us</title>
    <script src="lib/prototype.js" type="text/javascript"></script>
    <script src="src/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    window.onload=function()
    {
        d = new Draggable(
            'bsp',
            {
                change:check,
                handle:'innen'
            }
    );
    }
    var check = function()
    {
        if (parseInt($('bsp').style.left) >= 300)
        {
            this.constraint = 'vertical';
        }
        if (parseInt($('bsp').style.top) >= 400)
        {
            d.destroy();
        }
    }
    //]]>
    </script>
</head>
<body>
    <div id="bsp" style="position:absolute;color:#ff0000;">
        <pre>
            + ------ +
            |        |
            |        |
            + ------ <span id="innen" style="color:#0000ff;">+</span>
        </pre>
    </div>
</body>
</html>

So sollte es klappen.

vg
Hannes

_______________________________________________________________

/-/annes (j|g) ... http://www.jg-webdesign.de

3

Re: Kapitel 7.2.1 Drag&Drop Beispiel

vielen DANK für die schnelle Antwort, jetzt klappt es wunderbar.

vG
Doris