how to drag a div to the position of another div?

Question

i am new to html and jquery...i want to create 3 div's one below the other like div1,div2 and so on...and the div's should be draggable and now i want to drag div1 to the position of div3..now the order should be div3,div1,div2,...how can i do that?

please help me...

<html>
<head>
    <title>My First Template </title>
    <style type="text/css">

        html { 
            background: url(Software.png) no-repeat center center fixed; 
            -webkit-background-size: 100%;
            -moz-background-size: 100%;
            -o-background-size: 100%;
            background-size: 100%;
        }
    </style>


    <link rel="stylesheet" href="stylesheets/jquery.sidr.dark.css">

    <script  src="jquery.js" ></script>

    <script  src="jquery.sidr.min.js"></script>

    <link rel="stylesheet" type="text/css" media="all" href="SignUp.css">

    <script src="jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#div1").draggable();
      $("#div2").draggable();
      $("#div3").draggable();
      $("#div4").draggable();
        });
    </script>
</head>


<body>

    <div id="div1" style="position: relative; left: 850px; top: 100px; width: 500px; height: 100px; background-color: white">div1</div>
    <div id="div2" style="position: relative; left: 850px; top: 150px; width: 500px; height: 100px; background-color: blue">div2</div>
    <div id="div3" style="position: relative; left: 850px; top: 200px; width: 500px; height: 100px; background-color: green">div3</div>
    <div id="div4" style="position: relative; left: 850px; top: 250px; width: 500px; height: 100px; background-color: red">div4</div>  
</body>

</html>

Answer 1

Easiest way to do it: http://jqueryui.com/sortable/

Here is the code from jQuery example:

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

how to drag a div to the position of another div?

Question

1 answers

solution1
2 ACCPTED 2014-08-26 16:21:38

how to drag a div to the position of another div?

Question

1 answers

solution1 2 ACCPTED 2014-08-26 16:21:38

solution1
2 ACCPTED 2014-08-26 16:21:38