隐藏的droppables即使变得可见也不会反复触发

Question

我想有一个顶级的可放置区域，当用户开始将一些元素拖到这个区域时，我想将它分成不同的部分（北、东、南和西等）并允许用户放置在其中任何一个。

最好的方法是什么？

这是我尝试做的：

HTML

<div class='main_droppable_area'>
    <div class='drop_area north'></div>
    <div class='drop_area east'></div>
    <div class='drop_area south'></div>
    <div class='drop_area west'></div>
</div>
<div class='draggable_area'>
</div>

CSS

.main_droppable_area {
    top: 50px;
    left: 50px;
    right: 50px;
    height: 200px;
    border: 1px dashed blue;
    position: absolute;
}

.drop_area {
    position: absolute;
    border: 1px dashed blue;
    background-color: #eff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: none;
}

.drop_area.active {
    opacity: 1;
    filter: alpha(opacity=100);
}

.drop_area.north {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
}

.drop_area.south {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
}

.drop_area.west {
    top: 50px;
    left: 0px;
    bottom: 50px;
    width: 50px;
}

.drop_area.east {
    top: 50px;
    right: 0px;
    bottom: 50px;
    width: 50px;
}

.draggable_area {
    position: absolute;
    top: 300px;
    left: 50px;
    background-color: blue;
    width: 50px;
    height: 50px;
}

JavaScript

$(document).ready(function() {
    $( '.draggable_area' ).draggable();

    $('.main_droppable_area').droppable({
        accept: '.draggable_area',
        over: function() {
            console.log('main_droppable_area - over');
            $('.drop_area').show();
        },
        out: function() {
            console.log('main_droppable_area - out');
            $('.drop_area').hide();
        }
    });

    $('.drop_area').droppable({
        accept: '.draggable_area',
        over: function() {
            $(this).addClass('active');
            console.log('drop_area - over');
        },
        out: function() {
            $(this).removeClass('active');
            console.log('drop_area - out');
        }
    });
});

但不幸的是，这段代码并不总是有效...例如，如果我尝试从主要可放置区域之外拖动项目，它就无效。

但是，如果我将项目拖放到该区域并再次开始拖动它，它就会起作用。

我的代码有问题吗？这是我的 JSFiddle example

更新

感谢 T J 的解决方案...这里是 JS fiddle 的工作示例

Answer 1

如果您使用display:none 隐藏可放置对象，则根本不会呈现该元素。因此，当一个有效的可拖动对象开始拖动时，它不会被激活，并且在开始新的拖动激活可放置对象之前，您所做的更改不会发生。

一种解决方法是使用visibility:hidden 来隐藏您的内部可拖动对象，以便元素将被渲染，并且拖动将激活可放置对象以便 over、out等功能正常。

$(document).ready(function() {
  $('.draggable_area').draggable();

  $('.main_droppable_area').droppable({
    accept: '.draggable_area',
    over: function() {
      console.log('main_droppable_area - over');
      $('.drop_area').removeClass("invisible");
    },
    out: function() {
      console.log('main_droppable_area - out');
      $('.drop_area').addClass("invisible");
    }
  });

  $('.drop_area').droppable({
    activate: function() {
      console.log("activated");
    },
    accept: '.draggable_area',
    over: function() {
      $(this).addClass('active');
      console.log('drop_area - over');
    },
    out: function() {
      $(this).removeClass('active');
      console.log('drop_area - out');
    }
  });
});

.main_droppable_area {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  height: 200px;
  border: 1px dashed blue;
}
.drop_area {
  position: absolute;
  border: 1px dashed blue;
  background-color: #eff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.drop_area.active {
  opacity: 1;
  filter: alpha(opacity=100);
}
.drop_area.north {
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.south {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.west {
  top: 50px;
  left: 0px;
  bottom: 50px;
  width: 50px;
}
.drop_area.east {
  top: 50px;
  right: 0px;
  bottom: 50px;
  width: 50px;
}
.draggable_area {
  position: absolute;
  top: 300px;
  left: 50px;
  background-color: blue;
  width: 50px;
  height: 50px;
}
.invisible {
  visibility: hidden;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class='main_droppable_area'>
  <div class='drop_area north invisible'></div>
  <div class='drop_area east invisible'></div>
  <div class='drop_area south invisible'></div>
  <div class='drop_area west invisible'></div>
</div>
<div class='draggable_area'></div>