JQuery: div verschieben

J

jkallup

Erfahrenes Mitglied
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!!

Code: 
<!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>

Code: 
$(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';
        }
    });

});
 
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

Code: 
<!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>


Code: 
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();
        }
    });
});
 
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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück