Avatar billede RasmusTheR Seniormester
01. februar 2020 - 12:21 Der er 1 løsning

Flyt div rundt med musen inden i en anden div.

Jeg vil gerne lave en rammen med et div element (div01), hvor i jeg har et andet og større div element (div02), som jeg kan flytte rundt med ved brug af musen.

Jeg vil gerne have det sådan at det kun er den del af div02, som er inden for div01's ramme der er synlig, samt at man ikke kan flytte div02 ud af div01's ramme.

Jeg har forsøgt med nedenstående script, men man kan stadig se den del div02 som er udenfor div01's ramme, samt flytte den rundt på hele skærmen.. 



<style>
#div01{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    color: blue;
    border-color: black;
    border-style: solid;
    z-index: 2;
}
#div02{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 300px;
    height: 188px;
    background-color:yellow;
    color: blue;
    z-index: 1;
}
</style>

<div id="div01">
    <div id="div02">
       
    </div>
</div>

<script>
var mousePosition;
var offset = [0,0];
var div1;
var isDown = false;

div1 = document.getElementById("div02");

document.body.appendChild(div1);

div1.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div1.offsetLeft - e.clientX,
        div1.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {
            x : event.clientX,
            y : event.clientY
        };
        div1.style.left = (mousePosition.x + offset[0]) + 'px';
        div1.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
</script>
Avatar billede RasmusTheR Seniormester
02. februar 2020 - 10:36 #1
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester