Question

我有以下在jQuery中拖放图像的示例。这样很好（谢谢！）。

我的下一个问题是...例如，我如何拥有10个不同的放置区域，而不仅仅是一个但保持相同功能的区域？

我以为我可以复制粘贴10倍拖放功能，但是可以肯定的是，这不是一个好习惯。我是否还应该删除10个div ID（即div id =“ drop1”，div id =“ drop2” ...）？

有什么帮助吗？

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $(".draggable").draggable({
            cursor: "crosshair",
            revert: "invalid",
            helper: 'clone'
      });

         $("#drop").droppable({ accept: ".draggable",
        drop: function(event, ui) {
          $("#drop").empty();
            var check = 0;
            // $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );

            var x = event.clientX, y = event.clientY,
            elementMouseIsOver = document.elementFromPoint(x, y);
            var droppable = $(this);
            console.log("drop");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);

            console.log($(this).attr('class'));

            if(!elementMouseIsOver.classList.contains("clone")) {
                console.log("no clone");
                $(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
                // dropped.clone().appendTo(droppedOn);
                var clone = dropped.clone().addClass("clone");
                //clone[0].id = 'test';
                clone.appendTo(droppedOn);
            }
        },
        over: function(event, elem) {
            $(this).addClass("over");
            console.log("over");
        },
        out: function(event, elem) {
            $(this).removeClass("over");
        }
    });
      $("#drop").sortable();

      $("#origin").droppable({
            accept: ".draggable",
            drop: function(event, ui) {
            console.log("drop");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
      }});
});
</script>

    <title>Drag N Drop</title>
<style>
#origin
{
  /* background-color: lightgreen; */
  position: relative;
}

#drop {
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

.over {
  border: solid 5px purple;
}


</style>
</head>    
<body>
    <div id="wrapper">
        <div id="origin" class="fbox">
        <?php

        $sql2 = "SELECT *
                FROM players
                LIMIT 10";

        $res2 = mysqli_query($conexion,$sql2);

        $cont1 = 0;

        while( $row2 = mysqli_fetch_array( $res2 ) ) 
        {

            $cont1++;
?>


            <img id="<?php echo $row2["id"];?>" class="draggable" src="images/players/<?php echo $row2["name"]; ?>.png" width="50" height="50">



<?php

        }

?>
        </div>

        <div id="drop" class="fbox"></div>

    </div>
</body>

非常感谢！

jQuery中拖放示例的几个放置区域

0 个答案: