0
2 개의 DIV 태그가 있습니다. 하나는 드래그 가능이고 다른 하나는 삭제 가능합니다. 끌어서 놓기가 잘 작동합니다. 하지만 만약 내가 droppable 요소에 대한 크기를 조정할 수있는 메서드를 재정 의하여, 다음 드래그 항목이 숨어지고있다. 대상 항목 위에 표시되어야합니다. 나는 완전한 코드를 포함시켰다. 도와주세요. 미리 감사드립니다.JQuery : 크기를 조정할 수있는 옵션을 사용하여 다른 항목으로 드래그 한 항목이 숨겨 짐
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Synchronous resize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#dropTarget1 { width: 150px; height: 150px; padding: 0.5em; margin: 10px; }
#dropTarget2A { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 0px; }
#dropTarget2B { width: 150px; height: 150px; padding: 0.5em; margin: 0px; }
</style>
<script>
$(function() {
$("#draggable").draggable();
//Droppable events
$("#dropTarget1").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("Dropped at Target 1!");
}
});
$("#dropTarget2A").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("Dropped at Target 2A!");
}
});
$("#dropTarget2B").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("Dropped at Target 2B!");
}
});
//Resizable events
$("#dropTarget2A").resizable(
{
resize: function(event, ui){
$("#dropTarget2B").css("height", ui.size.height+"px");
}
});
$("#dropTarget2B").resizable(
{
resize: function(event, ui){
$("#dropTarget2A").css("height", ui.size.height+"px");
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content"><p>Drag me to my target</p></div>
<div id="dropTarget1" class="ui-widget-content"><p>Target 1</p></div>
<div id="dropTarget2A" class="ui-widget-content"><p>Target 2A</p></div>
<div id="dropTarget2B" class="ui-widget-content"><p>Target 2B</p></div>
</body>
</html>