Задача:
Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте так,
чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2) только
элемент с id=el3. После того, как элемент будет перетащен в принимающую его область
перетаскиваемый элемент должен стать невидимым, а цвет фона области должен изменится на
зеленый.
Практически все работает, только не могу сделать чтобы элемент el2 попадал drop1.
Помогите кто нибудь
Код:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#el1,#el2,#el3 {
border-style:solid;
border-width:1px;
height:180px;
width:200px;
}
#head {
text-align:center;
color:white;
border-style:solid;
border-color:#049797;
background-color:#049797;
}
#cont {
padding:8px;
}
#el2 {
position:absolute;
top:0px;
left:0px;
}
#el3 {
position:absolute;
top:0px;
left:260px;
}
#drop1 {
border:1px solid;
position:absolute;
top:270px;
left:0px;
height:180px;
width:200px;
text-align:center;
font-size:25px;
}
#drop2 {
border:1px solid;
position:absolute;
top:270px;
left:260px;
height:180px;
width:200px;
text-align:center;
font-size:25px;
}
#sort1 {
list-style-type:none;
margin:0;
padding:0;
width:40%;
}
#sort1 li {
margin:2px;
padding: 0.4em;
border-style:solid;
border-width:1px;
height:18px;
}
#wrap1 {
position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#el3").draggable({stack:"#drop2"});
$("#el2").draggable({stack:"#drop2",revert:true});
$("#drop2").droppable({
accept:"#el3",
over:function(){
$("#el3").css("background-color","#d7fa99");
$("#drop2").css("background-color","#d7fa99");
},
drop:function(){
$("#el3").css("display","none");
$("#drop2").css("background-color","#c4f66f");
$("#drop2").html("Готово!");
}
});
$("#el3").draggable({stack:"#drop1"});
$("#el2").draggable({stack:"#drop1"});
$("#drop1").droppable({
accept:"#el3",
over:function(){
$("#el3").css("background-color","#d7fa99");
$("#drop1").css("background-color","#d7fa99");
},
drop:function(){
$("#el3").css("display","none");
$("#drop1").css("background-color","#c4f66f");
$("#drop1").html("Готово!");
}
});
});
</script>
</head>
<body>
<p><b>3. Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте так, чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2) только элемент с id=el3. После того, как элемент будет перетащен в принимающую его область перетаскиваемый элемент должен стать невидимым, а цвет фона области должен измениться на зеленый.</b></p>
<div id="wrap1">
<div id="el2" class="ui-corner-all">
<div id="head">
Окно <b>el2</b>
</div>
<p id="cont">Данное окно можно перетаскивать мышкой.</p>
</div>
<div id="el3" class="ui-corner-all">
<div id="head">
Окно <b>el3</b>
</div>
<p id="cont">Данное окно можно перетаскивать мышкой.</p>
</div>
<div id="drop1"> Область 1 </div>
<div id="drop2">Область 2 </div>
</div>
</body>
</html>
28.04.2020, 20:17
JAVASCRIPT Работа с библиотеками JQueryи JQueryUI
Похожие темы
