How to avoid the superposition of divs in jquery ui draggable?

Question

I am dynamically generating some divs inside a container and these are draggable using the latest version of jquery-ui. The problem is when a div moves to another position, it does not respect the space of the other divs, so it can be on top of another div and I do not want that.

this is what happens if I decide to move a div and put it on over another div: this is a example of the error

This behavior is not good, the best would be that if I try to put one div on another, this action will not be executed.

This is my html code:

<div class="container">
    <div class="row" id="main_row_blog_results"> 
         <!--here the divs are dynamically generated -->
    </div>
</div>

This is my JS code:

$(document).ready(function(){
    $("#btnAddTextsBlog").click(function(){
        var texts = "this is a random text";
        var content2 = "<div id='text1' class='draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p contenteditable='true' style='font-size: 18px;'>"+texts+"</p></div>";

        $("#main_row_blog_results").append(content2); 

        $(".draggable").draggable(); 

    });         
    $( '.draggable' ).draggable({

    });

I would like to know how I could do to When user drags the div and drop it into the space of other div, move this div back to its original position...The idea is prevent collision between divs?

share the full relevant code with a full working example to reproduce — Alexandre Elshobokshy, Dec 20 '18 at 13:43
You need to use collision detection see https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection — sheavens, Dec 20 '18 at 15:06
It is not clear from your description what should happen if the user drags the item into that space. Should the be prevented from doing so or should the items under move out of the way? Please clarify your question. — Twisty, Dec 20 '18 at 16:35
@Twisty I'm sorry, you're right. When user drags the item and drop it into that space, this item should move back to its original position... — Carmen B., Dec 20 '18 at 17:28
@RolandF got it, to confirm, if a user drops an item someplace they should not, you want it to revert to it's original position. Are there some they can drop stuff on or if it is dropped on any other item? — Twisty, Dec 20 '18 at 17:36
There's an event that gets called on drop. Use it to determine if the target is a valid target. If it isn't, revert. For your usecase, droppable might be useful. — Kevin B, Dec 20 '18 at 17:50
@RolandF take a look at: http://jqueryui.com/draggable/#revert and http://api.jqueryui.com/draggable/#option-revert — Twisty, Dec 20 '18 at 21:08

score 1 · Accepted Answer · answered Dec 20 '18 at 21:34

I would advise something like the following:

$(function() {
  function makeDrag(obj) {
    obj.draggable({
      handle: ".drag-handle",
      revert: "invalid"
    });
  }

  $("#btnAddTextsBlog").click(function() {
    var content = $("<div>", {
      id: "text" + ($(".draggable").length + 1),
      class: "draggable",
    }).css({
      float: "left",
      margin: "30px",
      "margin-bottom": 0,
      disply: "block"
    }).appendTo($("#main_row_blog_results"));

    $("<span>", {
      class: "ui-icon drag-handle  ui-icon-arrow-4-diag"
    }).css({
      border: "1px solid #000",
      "border-radius": "3px",
      "margin-right": "3px"
    }).appendTo(content);

    $("<p>", {
      contenteditable: true
    }).css({
      "font-size": "18px",
      display: "inline-block"
    }).html("this is a random text").appendTo(content);

    makeDrag(content);
  });

  makeDrag($(".draggable"));
});

.drag-handle:hover {
  background-color: #ccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btnAddTextsBlog">Add</button>
<div class="container">
  <div class="row" id="main_row_blog_results">
    <!--here the divs are dynamically generated -->
  </div>
</div>

So the revert has a few options. I am using invalid here:

If set to "invalid", revert will only occur if the draggable has not been dropped on a droppable. For "valid", it's the other way around.

I have also added a handle since if the user goes to Edit the <p> element, they may click it to edit it and it might try to drag. So to avoid any potential confusion, we use a handle.

I moved away from appending the String of HTML to creating jQuery Objects that are a little easier to manipulate when creating dynamic items.

I also created a small function that can initialize a jQuery Object as a draggable. This helps always set each with the same settings.

Hope that helps.

That's very great, It helps me a lot. Thanks for this. – Carmen B. Dec 20 '18 at 21:59 — Carmen B., Dec 20 '18 at 21:59

How to avoid the superposition of divs in jquery ui draggable?

1 Answers1