Home » Jquery » Problem with two div droppables when drag element (Jquery Ui)

Problem with two div droppables when drag element (Jquery Ui)

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a problem with Jquery Ui Droppable.

I have two div droppables inside a div container, when i select the violet box and I drag it first to the second div and then to the first one, the div container gets selected together with the first div, this is the error I have, in the JsFiddle a red color gets turned on around it when I’m on top of it. I’ve looked around on the internet but i can’t find a solution.
If I drag the violet box to the first div and then to the second one it works ok, but not the other way around.
I attached a picture
In the JsFiddle the error is shown
Thank you

JsFiddle:
https://jsfiddle.net/7unvxgqo/

$(document).ready(function () {


$("#draggable2").draggable({
    // opacity : 0.7, 
    helper: "clone",
    scope: 1,
    start: function (e, ui) {
        $(ui.helper).addClass("drag-helper");

        //console.log(ui);
    }
});


$(".draggable3").droppable({
    greedy: true,
    tolerance: 'pointer',
    scope: 1


});


$("#droppable").droppable({
    //Over
    greedy: true,
    tolerance: 'pointer',

    scope: 1
})

});

Image:

The border red is active when drag a element in first div

How to&Answer:

One work around might be to add a small margin between the two nested elements.

Example: https://jsfiddle.net/Twisty/aL32ru7d/16/

HTML

<div id="draggable2" class="draggable">
</div>
<div class="container">
  <div id="drop-1" class="drop-zone">
    <p>Drop here</p>
    <div id="drop-nest-1" class="drop-nest">
      <p>First Div</p>
    </div>
    <div id="drop-nest-2" class="drop-nest">
      <p>Second Div</p>
    </div>
  </div>
</div>

CSS

.drop-nest {
  width: 100%;
  height: 100px;
  background: #0066CC;
  border: 2px solid #00FF00;
  margin-bottom: 6px;
}

#draggable2 {
  height: 100px;
  width: 100px;
  background-color: #CC33CC;
  margin-bottom: 3em;
}

.drop-zone {
  width: 100%;
  height: 500px;
  padding: 0;
  border: 5px solid black;
  background-color: #777;
  margin: 0px !important;
}

.drag-helper {
  width: 50px;
  height: 50px;
  padding: 0px;
  border: 5px solid gray;
  background-color: #CC33CC;
}

.container {
  width: 100%;
  padding: 0px !important;
  margin: 0px !important;
}

.my-hover {
  border: 5px dashed #FF0000 !important;
}

body,
html {
  margin: 0px;
}

JavaScript

$(function() {
  $("#draggable2").draggable({
    // opacity : 0.7, 
    helper: "clone",
    scope: 1,
    start: function(e, ui) {
      $(ui.helper).addClass("drag-helper");
    }
  });

  $(".drop-zone, .drop-nest").droppable({
    greedy: true,
    tolerance: 'pointer',
    scope: 1,
    over: function(e, ui) {
      $(this).addClass("my-hover");
    },
    out: function(e, ui) {
      $(this).removeClass("my-hover");
    }
  });
});

The issue seems to be related to the greedy option and out. For a split second, the mouse position triggers both to detect an over. Making a little space can allow the mouse to pick one of the elements and not both. The caveat here is that if the mouse is moved very quickly, it can still trigger the issue.

I selected 6px but I tested with a number of values. The smaller the gap, the easier it is to trigger.