How to move one element to the position of the other with Jquery?

Asked

Viewed 7,699 times

5

I have an element and I want that when the user hovers over it, it should go to the position of another element.

For example: I have the element A and I have the element B, when the user hovers the mouse in the element A, need to move (slide, move) the element A up to the position of the element B.

The problem is that the element A are using position: absolute referent there is a div with position: relative. And the element B is using position: absolute referent there is another div.

Does anyone know how I can do it?

javascript jquery css

  • It automatically goes up to the B. When I simply give the Hover on the A, it should automatically slide up to the B.

2 answers

7


I decided to do the following:

One div Draggable, You can move it freely across the screen. Several div forming a Grid, for this example I put them at the bottom of the page.

When passing the mouse on which you want div mouse inside the Grid it will move up to the center of the div Draggable.

var dragzone = $("#dragzone");
var draggable = $("#draggable");

dragzone.on("dragover", function (event) {    
    event.preventDefault();    
});

dragzone.on("drop", function(event) {   
    draggable.offset({ top: event.originalEvent.y, left: event.originalEvent.x });  
    event.preventDefault();
});


$(".cell").on("mouseenter", function () {    
    var cell = $(this);
    cell.off("mouseenter");
    
    console.log(cell.offset());
    var top = draggable.offset().top - cell.offset().top + 7;
    var left = draggable.offset().left - cell.offset().left + 7;    

    cell.css("transform", "translate(" + left + "px, " + top + "px)");
    window.setTimeout(function () {
        cell.remove();
        var count = parseInt(draggable.html()) + 1
        draggable.html(count);
    }, 1000);
});
body {    
    background-color: whitesmoke;  
}

#dragzone {      
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 300px;
    margin: auto;
}

#draggable {    
    width: 100px;
    height: 100px;
    position: fixed;
    top: 10px;
    left: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    font-size: 50px;
    font-weight: bold;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}

#draggable span {
    margin: auto;
}

#container {
    position: fixed;
    width: 400px;
    height: 200px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}

.row {
    width: 400px;
    height: 100px;    
}

.column {
    float: left;
    width: 100px;
    height: 100px;    
}

.cell {
    width: 86px;
    height: 86px;
    margin: 7px;
    background-color: gainsboro;
    box-shadow: 0px 0px 10px black;
    transition: transform 1s;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="dragzone">     
    <div id="draggable" draggable="true">
        0
    </div>  
    <div id="container">
        <div class="row">
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
            <div class="column">
                <div class="cell"></div>
            </div>
        </div>
    </div>    
</div>

2

1 - EXAMPLE:

MOVE TO ANY AXLE POSITION X And Y:

<html>
<head>
<title>Overflow</title>
<script language='JavaScript' type='text/JavaScript'>
<!--

function reset1(){

    clearTimeout(my_time);
    document.getElementById('ball1').style.left= "500px";
    document.getElementById('ball1').style.top= "100px";
    document.getElementById('ball1').style.right= "100px";
    document.getElementById("msg").innerHTML="";

}



function move_img(str) {

    var x=document.getElementById('ball1').offsetTop;
    x= x +100;
    document.getElementById('ball1').style.top= x + "px";

}

function disp(){

    var step=1; // Change this step value

    var y=document.getElementById('ball1').offsetTop;
    var x=document.getElementById('ball1').offsetLeft;

        if(y < 100){y= y +step; // DEFINA AQUI OS VALORES
                document.getElementById('ball1').style.top= y + "px"; // vertical movimento
            }else{
                if(x < 200){x= x +step; // DEFINA AQUI OS VALORES
                document.getElementById('ball1').style.left= x + "px"; // horizontal movimento
            }
    }
//////////////////////

}

function timer(){
disp();
var y=document.getElementById('ball1').offsetTop;
var x=document.getElementById('ball1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x + " Y : " + y
my_time=setTimeout('timer()',10);
}


//-->
</script>


<style type="text/css">
 
#ball1{
    border-radius:30px;
    height:50px;
    position:absolute;
    top:40px;
    width:50px;
    left: 500; 

}

#ball1{
    background:#282828;
    left:50px; //posição inicial
}
</style>

</head>
<body >
<div id="ball1" onmouseover=timer() ></div>

<div id='msg'></div>

</body>
</html>

2 - EXAMPLE:

The attributes of the div #ball1 define the initial position and attribute left of animate, sets the final position. USE YOUR LOGIC!

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <title>Animate jQuery</title>
    </head>
    <script>
    $(document).ready(function(){


     $( "#ball1" ).mouseover(function() {


         $("#ball1").animate({
             "left": "500px" // distância
         }, 1000); // tempo da velocidade
    });
        
    });

    </script> 
    <style type="text/css">
    #box{
        border:1px solid #512B11;
        height:200px;
        left:10px;
        position:relative;
        top:10px;
        overflow:hidden;
        width:600px;
    }
     
    #earth{
        background:#523723;
        border-top:20px solid #090;
        bottom:0;
        height:50px;
        position:absolute;
        width:600px;
    }
     
    #ball1{
        border-radius:30px;
        height:50px;
        position:absolute;
        top:80px;
        width:50px;
    }

    #ball1{
        background:#282828;
        left:50px; //posição inicial
    }
    </style>
     
    <body>
     
    <div id="box">
        <div id="ball1"></div>
        PONTO A<div id="earth"></div>

        <div style="float: right;">PONTO B</div>
    </div>
     
    </body>
    </html>

  • Lollipop, thank you for your reply. But then, it doesn’t help because I can’t put a set distance because element B can be anywhere. Then element A should go to element B, no matter where it is. But thanks for the help

  • Mano, the "left": "500px" sets any distance from A to B. Your logic must define where you want to be and not this code itself.

  • 1

    @It causes this information that the element can be anywhere on the screen is important to be added together with the question. The way you asked, Lollipop’s answer is correct.

  • Cauê, REPLY EDITED AS YOUR COMMENT! I left the second example, because, as @Renan said, answers your question.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.