隱藏的可拖動對象即使變爲可見後也不會觸發。

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

UPDATE

感謝TJ爲解...這裏是JS fiddle與工作示例

Answer 1

如果您使用隱藏的display:none droppables，該元素將不完全呈現。因此，當一個有效的可拖動開始拖動，它不會被激活激活，並且您所做的更改將不會發生，直到一個新的拖動開始激活可拖放。

一個解決方法是使用visibility:hidden，而不是隱藏自己內心的拖拽元素，這樣的元素會呈現和拖動將激活 droppables使超過，出等功能正常。

$(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>