Question 279581 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Draggable and dropable boxes between different DIVs

I need some help here.

<html>

  <head>
    <meta charset="UTF-8">
    <title>Organize Boxes</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
      .box {
        background-color: #f0f0f0;
        padding: 10px;
        margin: 5px;
        text-align: center;
        cursor: move;
      }

      .group {
        margin: 10px;
        text-align: left;
        display: flex;
        border: 1px solid black;
      }

      .group1 {
        border: 1px solid blue;
      }

      .group2 {
        border: 1px solid red;
      }

      .group3 {
        border: 1px solid green;
      }

    </style>
  </head>

  <body>
    <div class='boxes'>
      <div id="group1" class='group group1'>
        <div class="box" id="box11">Box 11</div>
        <div class="box" id="box12">Box 12</div>
      </div>
      <div id="group2" class='group group2'>
        <div class="box" id="box21">Box 21</div>
        <div class="box" id="box22">Box 22</div>
        <div class="box" id="box23">Box 23</div>
      </div>
      <div id="group3" class='group group3'>
        <div class="box" id="box31">Box 31</div>
      </div>
    </div>
  </body>

</html>

I would like to organize de boxes (box XY) with drag-and-drop moving them between groups (.group). Observe that XY is the box position (row, column). There is no need rename them with new position.

It will be good if we have an effect when moving the boxes. Eg.: moving a box aside so that another can enter its position.

Thank you very much for your attention.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The best way I found was

    $("document").ready(function() {
    $(".box").draggable({
        revert: true
    });

    $(".group").droppable({
        accept: '.box',
        drop: function(event, ui) {
            $(this).append($(ui.draggable));
        }
    });
});

    But the efects isn't very good...

    https://jsfiddle.net/bhqjg7p2/


  2. 0

    Here’s a basic draggable/droppable demo. The draggable element changes color when dragged and when dropped in the droppable $(".group")

    // make all box elements draggable
$(".box").draggable({
  drag: function(event, ui) {
    //console.log('drag');
    $(this).css('background-color', '#797ef6');
  }
});

$(".group").droppable({
  accept: ".box",
  tolerance: "fit",

  drop: function(event, ui) {
    // dropped
    //console.log('drop');
    ui.helper.css('background-color', '#f0f0f0');
  },
});
    .box,
.dropped {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  text-align: center;
  cursor: move;
}

.group {
  margin: 10px;
  text-align: left;
  display: flex;
  border: 1px solid black;
}

.group1 {
  border: 1px solid blue;
}

.group2 {
  border: 1px solid red;
}

.group3 {
  border: 1px solid green;
}
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class='boxes'>
  <div id="group1" class='group group1'>
    <div class="box" id="box11">Box 11</div>
    <div class="box" id="box12">Box 12</div>
  </div>
  <div id="group2" class='group group2'>
    <div class="box" id="box21">Box 21</div>
    <div class="box" id="box22">Box 22</div>
    <div class="box" id="box23">Box 23</div>
  </div>
  <div id="group3" class='group group3'>
    <div class="box" id="box31">Box 31</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search