Question

我已经使我的div拖放，但是我想要的效果是将一个div拖动到一个位置，然后其他div将调整到它，并且我希望div只能在某个区域中掉落。例如，我想将第一个div拖到列表中的第三个位置，所以我将它拖到位置2和3之间，然后div将重新调整并“点击”到位。你可以看到我已经注释了一些我一直在尝试的脚本，因为我已经尝试了几件事。现在代码的作用是当一个元素被拖动到另一个元素时，而不是取元素位置，它将消失在元素后面。提前谢谢！

这是我的代码：

   <!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

由于您已经在使用jQuery，并且如果您愿意使用jQuery UI插件，那么jQuery UI正是您正在寻找的可排序交互。 https://jqueryui.com/sortable/

编辑：我没有在代码的顶部看到你已经拥有了jQuery UI的脚本。所以，你应该好好去使用它。

html5将<div>拖放到位置

1 个答案: