jquery-ui: make hidden-overflow elements not-droppable

Question

Our UI hides lists of droppable elements by making their parent container be 0px high, and setting overflow:hidden. Unfortunately this means that those elements are still there, "behind" the next list of elements. When we try to drag a draggable element onto the second, fully visible, list of droppable elements, the drop event fires twice - first for the hidden element and then again for the visible one the user (presumably) intended to drop onto.

JSFiddle to demonstrate

<style>
.container {
  overflow:hidden;
}

.child {
  height:24px;
  border:solid 1px black;
}
.movable { 
  padding: 0.5em; 
  float: left; 
  margin: 10px 10px 10px 0;
  border:solid 1px red;
}
</style>


<div class="movable">
Hello World
</div>
<div class="container" style="height:0px">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<div class="container" style="height:auto">
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>

<script>
$( function() {

  $('.movable').draggable();

  $('.child').droppable ({
    accept: '.movable',
    drop: function(event, ui) {
      var kid = $(event.target).html();
      alert("dropping movable div onto div " + kid);
    }
  });
});
</script>

Is there any way to make a droppable element not-droppable if it is hidden due to being overflow of its parent? The workaround hack I have right now is just to check in the drop() function if the event's target's parent has a height of 0px, but that seems very klunky - I'd like the first drop event to not fire at all.

Twisty · Accepted Answer · 2022-12-15 15:52:20Z

Consider using display properties instead.

Example: https://jsfiddle.net/Twisty/1quszny9/

HTML

<div class="movable">
  Hello World
</div>
<div class="container" style="display: none;">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
<div class="container">
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

JavaScript

$(function() {

  $('.movable').draggable();

  $('.child').droppable({
    accept: '.movable',
    drop: function(event, ui) {
      if ($(this).is(":visible")) {
        var kid = $(this).html();
        console.log("dropping movable div onto div " + kid);
      } else {
        return false;
      }
    }
  });
});

You can do something similar with the height attribute if you want.

if($(this).height() > 0)

Neither remove it from the DOM and both basically cause it not to be rendered.

M.Ismail · Accepted Answer · 2022-12-13 01:37:41Z

0

with the same logic that you suggest is to make sure that the height is 0, here is workaround :

$( function() {

  $('.movable').draggable();

  $('.child').droppable ({
    accept: '.movable',
    drop: function(event, ui) {
      var kid = $(event.target).html();
      if(kid < 5 ) {
       $(event.target).height(0);
       }
       
       if($(event.target).height() > 0){ 
       alert($(event.target).height());
      alert("dropping movable div onto div " + kid);
      }
      
    }
  });
});

answered Dec 13, 2022 at 1:37

M.Ismail

4375 silver badges11 bronze badges

Collectives™ on Stack Overflow

jquery-ui: make hidden-overflow elements not-droppable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related