# JQuery: div verschieben



## jkallup (5. April 2013)

Hallo,

wie kann ich ein div background image mit der Maus verschieben?
Momentan geht das nur nach unten rechts.
wenn ich außerhalb des bildes komme, geht es nicht mehr.
danke für Gilfe

P.S.: ich will kein jquery ui einsetzen!!


```
<!DOCTYPE html>
<html>
    <head>
        <title>ein test</title>
        <meta http-equiv="cache-control" content="no-cache">
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="jquery.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="content">
            <div id="scroller" style="background-image: url(./images/p001.jpg);">
            </div>
                <div id="backscroller" style="background-image: url(./images/p002.jpg);">
                </div>
        </div>
    </body>
</html>
```


```
$(document).ready(function()
{
    $("#backscroller").animate({width:'toggle'},1000);

    $("#content").mousedown(function(){
        mskeydown = true;

        var element = $("#scroller")[0];
        old_xpos = element.style.left;
        old_ypos = element.style.top;
    });

    $("#content").mouseup(function(){
        mskeydown = false;
    });

    $("#content").mousemove(function(e){
        if (mskeydown)
        {
            var element = $("#scroller")[0];
            element.style.left = (e.pageX - old_xpos) + 'px';
            element.style.top  = (e.pageY - old_ypos) + 'px';

            old_xpos = element.style.left;
            old_ypos = element.style.top;
        }
    });

    $("#scroller").mouseleave(function(e){
        if (mskeydown)
        {
            var element = $("#scroller")[0];
            element.style.left = e.pageX + 'px';
            element.style.top  = e.pageY + 'px';
        }
    });

});
```


----------



## jkallup (6. April 2013)

*Nachtrag: JQuery: div verschieben*

So,

habe wieder mal ein bisschen gebastelt.
jetzt wird ein div angezeigt, das knubbels drum rum hat.
wenn ich auf den rechten unteren klicke und die maus bewege ok.
Bewege ich dagegen den rechten oberen knubbel, wird die Größe nicht ver#ndert.
also alles was dann anscheinend < 0 ist wird nicht umgesetzt.
kann da mal einer einen tipp geben?

Danke schonmal


```
<!DOCTYPE html>
<html>
    <head>
        <title>ein test</title>
        <meta http-equiv="cache-control" content="no-cache">
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="jquery.js" type="text/javascript"></script>
        <script src="Storage.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="content">
            <div id="designer">
                <div id="scroller" class="resizeable" style="background-image: url(./images/p001.jpg);">
                    <div id="linksoben"></div>
                    <div id="rechtsoben"></div>
                    <div id="rechtsunten"></div>
                    <div id="linksunten"></div>
                </div>
                <div id="backscroller" style="background-image: url(./images/p002.jpg);">
                </div>
            </div>
        </div>
    </body>
</html>
```



```
var mouseX = 0;
var mouseY = 0;
var offX = 0, oldx,oldy;
var offY = 0;

var objDrag = null;
var element = null;

function getResizes()
{
    element = $("#scroller")[0];
    element.style.left = $.Storage("picXpos");
    element.style.top  = $.Storage("picYpos");

    var el = element;

    id = $("#scroller")[0].children[0];
    if (id.id === "linksoben")
    {
        $(id).css("position","absolute");
        $(id).css("background","#a0a000");
        $(id).css("top"   ,-16+"px");
        $(id).css("left"  ,-16+"px");
        $(id).css("width" ,(32) + "px");
        $(id).css("height",(32) + "px");
        $(id).css("border-radius","20px");
    }

    id = $("#scroller")[0].children[1];
    if (id.id === "rechtsoben")
    {
        $(id).css("position","absolute");
        $(id).css("background","#a0a000");
        $(id).css("top"   ,-16+"px");
        $(id).css("right" ,-16+"px");
        $(id).css("width" , 32+"px");
        $(id).css("height", 32+"px");
        $(id).css("border-radius","20px");
    }
    id = $("#scroller")[0].children[2];
    //if (id.id === "rechtsunten")
    {
        $(id).css("position","absolute");
        $(id).css("background","#a0a000");
        $(id).css("bottom",-16+"px");
        $(id).css("right" ,-16+"px");
        $(id).css("width" , 32+"px");
        $(id).css("height", 32+"px");
        $(id).css("border-radius","20px");
    }
    id = $("#scroller")[0].children[3];
    //if (id.id === "linksunten")
    {
        $(id).css("position","absolute");
        $(id).css("background","#a0a000");
        $(id).css("bottom",-16+"px");
        $(id).css("left"  ,-16+"px");
        $(id).css("width" , 32+"px");
        $(id).css("height", 32+"px");
        $(id).css("border-radius","20px");
    }
}

$(document).ready(function()
{
    objDrag = null;
    getResizes();

    function startDrag()
    {
        offX = mouseX - objDrag.offsetLeft;
        offY = mouseY - objDrag.offsetTop;
    }

    $("#backscroller").animate({width:'toggle'},1000);
    $("#content").css("position","absolute");

    $("#content").mousedown(function()
    {
        objDrag = $("#scroller")[0];
        startDrag("#scroller");
    });

    $("#content").mouseup(function(){
        $.Storage("picXpos",(objDrag.style.left));
        $.Storage("picYpos",(objDrag.style.top));

        objDrag = null;
    });

    $("#content").mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;

        if (objDrag != null) {
            objDrag.style.left = (mouseX - offX) + "px";
            objDrag.style.top  = (mouseY - offY) + "px";
        }
    });


    $("#rechtsunten").mousedown(function()
    {
        objDrag = $("#scroller")[0];
        startDrag("#scroller");
    });
    $("#rechtsunten").mouseup(function(){
        objDrag = null;
    });
    $("#rechtsunten").mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;

        if (objDrag != null)
        {
            element.style.width  = offX + "px";
            element.style.height = offY + "px";

            startDrag();
        }
    });

    $("#rechtsoben").mousedown(function()
    {
        objDrag = $("#scroller")[0];
        startDrag("#scroller");

        $("#scroller").css("position","relative");
    });
    $("#rechtsoben").mouseup(function(){
        objDrag = null;
    });
    $("#rechtsoben").mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;

        if (offY < 0)
        {
            if (objDrag != null)
            {
                element.style.top  = "10px";
                element.style.left = "10px";

                startDrag();
            }
        }
        else
        if (objDrag != null)
        {
            element.style.width  = offX + "px";
            element.style.height = offY + "px";

            startDrag();
        }
    });
});
```


----------



## veeman (7. April 2013)

Könntest du vl. ein abgespecktes Archiv mit allen benötigten Dateien bereitstellen, so ist es schwer das Problem nach vollzuziehen.

Btw. was spricht gegen jquery-ui?


----------



## jkallup (7. April 2013)

Hallo,

hier das Archiv.
wenn was unklar ist oder fehlt bitte melden.

Danke


----------

