html5 drag and drop <div>s into positions

Question

I have made my divs drag and droppable, however the effect I'm going for is to drag one div to a position then the other divs will adjust to it, and I want the div only to drop in a certain area. For example, I want to drag the first div to the third position in a list, so I would drag it between position 2 and 3, then divs would readjust and "click" into position. You can see I commented out some script that I have been trying out, as I have tried several things. Right now what the code does is when an element is dragged to another element, instead of taking the elements position, it will disappear behind the element. Thank you in advance!

Here's my code:

   <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="js/bootstrap.js" />
    <link rel="stylesheet" href="js/carousel.js" />
    <link rel="stylesheet" type="text/css" href="shopping.css" />
    <link rel="stylesheet"                                                      href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<header>
    <h2>Premium Computer Supplies!</h2>
</header>
<body>
<!----------------------------------------------------------------->
<!--<div id="all">-->    
    <div class="row" id="box1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img  id="a" src="surface3.jpg" alt="Microsoft Surface">
            <!--Accordion heading-->
            <h3>Microsoft Surface Pro 3</h3>
                <div id="pnd1">
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $999!</p>
                </div>
            </div>
        </div>
<!----------------------------------------------------------------->
    <div class="row" id="box2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
            <!--Accordion heading-->
            <h3>Microsoft Surface Pro 3 Typer Cover</h3>
                <div id="pnd2">
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $129!</p>
                </div>
            </div>
        </div>
<!----------------------------------------------------------------->
    <div class="row" id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
            <!--Accordion heading-->
            <h3>Macbook Pro Retina Display</h3>
                <div id="pnd3">
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $1299!</p>
                </div>
            </div>
        </div>
<!----------------------------------------------------------------->
    <div class="row" id="box4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img id="d" src="superdrive.jpg" alt="Apple SurperDrive">
            <!--Accordion heading-->
            <h3>Apple SuperDrive</h3>
                <div id="pnd4">
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $79!</p>
                </div>
            </div>
        </div>
<!----------------------------------------------------------------->
    <div class="row" id="box5" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img id="e" src="case1.jpg" alt="Laptop Case">
            <!--Accordion heading-->
            <h3>Laptop Case</h3>
                <div id="pnd5">
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $39!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
<script>

    $( ".row" ).mouseenter(function() {
        $(this).animate({ 
            fontSize : '17', 
            opacity : '0.6'
        }, 1);
    });

    $( ".row" ).mouseleave(function() {
        $(this).animate({ 
            fontSize : '14',
            opacity : '1'
        }, 1);
    });

 /*   $(document).ready(function(){
        $("p").animate({
            height: 'toggle'
     });
 });  */

    $("div#box1").click(function(){
        $("#pnd1").animate({
            height: 'toggle'
        });
    });

    $("div#box2").click(function(){
        $("#pnd2").animate({
            height: 'toggle'
        });
    });

    $("div#box3").click(function(){
        $("#pnd3").animate({
            height: 'toggle'
        });
    });

    $("div#box4").click(function(){
        $("#pnd4").animate({
            height: 'toggle'
        });
    });

    $("div#box5").click(function(){
        $("#pnd5").animate({
            height: 'toggle'
        });
    });

   /* $(function() {
        $( ".row" ).draggable();
  });

    $( ".row" ).droppable({
      drop: function( event, ui ) {
        $( this )
      }
    })*/

    function allowDrop(ev) {
     ev.preventDefault();
 }

 function drag(ev) {
     ev.dataTransfer.setData("text", ev.target.id);
 }

 function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
 }
    </script>
</body>

CSS:

    img {
    width:290px;
    height:200px;
}
header{
    background-color: royalblue;
    color:gold;
    padding-left: 0;/*why is this not working*/
    width:100%
}
body{
    width:90%;
    background-color: lightgray;
    font-size: 3;
    padding-left: 5%
}
.row{
    background-color: white;
    float:left;
    width:300px;
    height:400px;
    padding-left: 1px;
    border: 1px solid royalblue;
    margin: 2px;
}
#all{
    width:90%;
}

Answer 1

Since you're already using jQuery, and if you're willing to use a jQuery UI plugin, then jQuery UI has just what you're looking for with it's Sortable interaction. https://jqueryui.com/sortable/

EDIT: I didn't see at the top of your code that you already have the script for jQuery UI. So, you should be good to go to use it.

html5 drag and drop <div>s into positions

Question

1 answers

solution1
3 ACCPTED 2015-06-23 14:18:25

html5 drag and drop <div>s into positions

Question

1 answers

solution1 3 ACCPTED 2015-06-23 14:18:25

solution1
3 ACCPTED 2015-06-23 14:18:25