1

我想擁有最高級別的可拖放區域,當用戶開始將某些元素拖動到此區域時,我想將它分割到不同的部分(北部,東部,南部和西部等),並允許用戶下降任何一個。隱藏的可拖動對象即使變爲可見後也不會觸發。

什麼是最好的方法來做到這一點?

這裏是我嘗試做:

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與工作示例

+0

究竟你* 「它不工作」 的意思* ..? – 2014-12-06 06:17:17

+0

我無法獲得代碼「上」和「下」工作。打開控制檯並嘗試將藍色框拖入可投放區域。當你在北/東/南/西區域移動時,它應該捕捉/超出事件,但它不會。 – 2014-12-08 02:45:51

回答

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>

+1

酷!謝謝T J!我在想這與這個地區是隱藏的,但不知道如何解決這個事實有關......不是很有效! – 2014-12-10 17:13:13

相關問題