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

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

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.

Tags:

2

Answers


  1. 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);
      }
      
    }
  });
});
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search