How to move one element to the other's position with JQuery?

Navigation
5

I have an element and want it when the user hover 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 moves the mouse in the A element, I need to move (slide, move) the A element to the position of the B element. >

The problem is that the A element is using position: absolute referring to div with position: relative . And the B element is using position: absolute referring to another div .

Does anyone know how I can do this?

    
asked by anonymous 13.02.2015 / 18:29

2 answers

7

I decided to do the following:

A% with%% of%, you can move it freely around the screen. Several div forming a Draggable , for this example I placed them at the bottom of the page.

If you hover the mouse on any mouse within div it will move to the center of Grid div . 

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><divid="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>
    
14.02.2015 / 00:27
2

1 - EXAMPLE:

MOVE TO ANY X 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 the left attribute of animate , sets the end 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>AnimatejQuery</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>
    
13.02.2015 / 20:06
Why an anonymous method can not be assigned to a var or dynamic? Firefox serrated font