Помогите исправить ошибку jQuery UI - Помощь студентам

Yukki · 16.05.2020, 20:48

Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте так,
чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2) только
элемент с id=el3. После того, как элемент будет перетащен в принимающую его область
перетаскиваемый элемент должен стать невидимым, а цвет фона области должен изменится на
зеленый.

Вот мой код:

Код:

<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">
#el2
{
padding:15px;
border-style:solid;
border-width:1px;
width:130px;
height:100px;
}
#el3
{
position: absolute;
top: 480px;
left: 200px;
padding: 15px;
border-style: solid;
border-width: 1px;
width: 130px;
height: 100px;
}
.ui-draggable-dragging
{
background-color:#ecbfda;
}
#drop1
{
position: absolute;
left: 8px;
top: 650px;
padding: 15px;
border-style: solid;
border-width: 1px;
width: 130px;
height: 100px;
}
#drop2
{
left: 177px;
top: -122px;
padding: 15px;
border-style: solid;
border-width: 1px;
width: 130px;
height: 100px;
}
</style>
$(document).ready(function(){
$("#el3").draggable({stack:"#drop2"});
$("#el2").draggable({stack:"#drop2",revert:true});
$("#drop2").droppable({accept:"#el3",accept:"#el2",
over:function(){
   $("#el3").css("background-color","#d7fa99");
  
},
drop:function(){
   $("#el3").css("display","none");
   $("#drop2").css("background-color","#c4f66f");
$("#drop2").html("Перемещение завершено успешно.");
}
});
});
    </script>
</head>
<body>
<div id="el3" class="ui-widget ui-corner-all">Вы можете перетащить меня Id = el3 </div>
<div id="el2" class="ui-widget ui-corner-all">Вы можете перетащить меня Id = el2 </div>
<div id="drop1" class="ui-widget ui-corner-all">Я приму только элемент id=el3</p>
<div id="drop2" class="ui-widget ui-corner-all">Я приму все элементы </p>
</body>
</html>

BDA · 16.05.2020, 22:43

Код:

<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">
.ui-widget
{
    display:inline-block;
    padding:15px;
    margin:15px;
    border-style:solid;
    border-width:1px;
    width:350px;
    height:50px;
}
.ui-draggable-dragging
{
    background-color:#ecbfda;
}
</style>
<script>
$(document).ready(function(){
    $("#el3").draggable();
    $("#el2").draggable();
    $("#drop1").droppable({
        over:function(event, ui){
            ui.draggable.css("background-color","#d7fa99");
        },
        out:function(event, ui){
            ui.draggable.css("background-color","#ecbfda");
        },
        drop:function(event, ui){
            ui.draggable.css("display","none");
            $(this).css("background-color","#c4f66f");
            $(this).html("Перемещение завершено успешно.");
        }
    });
    $("#drop2").droppable({
        accept: "#el3",
        over:function(event, ui){
            ui.draggable.css("background-color","#d7fa99");
        },
        out:function(event, ui){
            ui.draggable.css("background-color","#ecbfda");
        },
        drop:function(event, ui){
            ui.draggable.css("display","none");
            $(this).css("background-color","#c4f66f");
            $(this).html("Перемещение завершено успешно.");
        }
    });
});
</script>
</head>
<body>
<div id="el3" class="ui-widget ui-corner-all">Вы можете перетащить меня Id = el3</div>
<div id="el2" class="ui-widget ui-corner-all">Вы можете перетащить меня Id = el2</div>
<div id="drop1" class="ui-widget ui-corner-all">Я приму все элементы</div>
<div id="drop2" class="ui-widget ui-corner-all">Я приму только элемент id = el3</div>
</body>
</html>

Yukki · 16.05.2020, 23:11

Спасибо)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
С#.Помогите исправить ошибку.	serg.malkow2014	Помощь студентам	0	13.05.2014 20:44
помогите исправить ошибку	kinza	Помощь студентам	5	09.06.2009 15:27
помогите исправить ошибку	Temirlan	Общие вопросы Delphi	2	20.02.2009 18:42
Помогите исправить ошибку	sergoss	Общие вопросы Delphi	2	14.02.2009 09:59
помогите исправить ошибку.	RUSLAN13	Помощь студентам	1	25.12.2008 17:22

16.05.2020, 23:11	#3
Yukki Пользователь Регистрация: 04.03.2019 Сообщений: 10	Спасибо)