Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 185861
18.04.2012, 19:40
73.08 руб.
0 0 0
Компьютеры Программирование
Здравствуйте! Прошу помощи в следующем вопросе:
Добрый вечер!
Работаю над созданием функционала drag & drop, берем вариант ответа слева и перетаскиваем на правую часть (код в приложении, а также вживую на сайте http://anort.ru/dragdrop/dragdrop.html ).
Проблема в том, что когда я перетаскиваю налево элемент, он встает в том месте, где была отпущена кнопка мыши, а необходимо, чтобы элемент красиво становился на место сам. Как бы это можно было реализовать?
Большое спасибо.


Приложение:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link type="text/css" href="jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<style type="text/css">
.draggable {
width:130px;
height:40px;
border:1px solid #ddd;
background-color:#eee;
}
.droppable {
width:130px;
height:25px;
display: inline-block;
padding: 10px 0;
border:1px solid #c9c396;
background-color:#eee6a3;
}
.answersPlace {
width:130px;
height:40px;
border:1px solid #ddd;
background-color:#eee;
position: absolute;
}
.answBlock {
margin-top: 10px;
}
</style>
</head>
<body>
<div style="height: 500px; width: 500px; border: 1px solid black; float: right; margin-right: 200px;">
<div class="answBlock">
<div class="answersPlace">
 
</div>
<div id="answ1" class="draggable">
Вариант ответа 1
</div>
</div>
<div class="answBlock">
<div class="answersPlace">
 
</div>
<div id="answ2" class="draggable">
Вариант ответа 2
</div>
</div>
</div>
<div style="height: 500px; width: 500px; border: 1px solid black;">
Очень много
<div id="place1" class="droppable">
 
</div>
, а также много
<div id="place2" class="droppable">
 
</div>
</div>
<div id="result">

</div>
<script type="text/javascript">
jQuery(".draggable").draggable({ revert:"invalid" });
jQuery(".droppable").droppable({
drop:function(event, ui){
jQuery(this).addClass("ui-state-highlight");
jQuery("#result").html(this.id + ui['draggable'].attr('id'));
}
});
</script>
</body>
</html>

Обсуждение

Форма ответа