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

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 >
Hello World
</div>
<div  style="height:0px">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
</div>
<div  style="height:auto">
<div >5</div>
<div >6</div>
<div >7</div>
<div >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.

CodePudding user response：

Consider using display properties instead.

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

HTML

<div >
  Hello World
</div>
<div  style="display: none;">
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>
<div >
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >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.

CodePudding user response：

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);
      }
      
    }
  });
});