Как задать координаты для draggable-элемента, добавленного с помощью jquery UI
Делаю конструктор блоков:
<div id='constructor'></div> по нажатию кнопки внутрь этого контейнера добавляются блоки, которые можно будет двигать:
var id = тут генерируется следующий уникальный номер блока
$('#constructor').append("<div id='item_" + id + "'>текст</div>");
$('#item_' + id).draggable({containment:'parent',zIndex:id});
дальше пытаюсь задавать для вновь созданного блока координаты, чтобы прижать его вверх контейнера:
$('#item_' + id).data('draggable').offset.click.top = 0;
и этот способ не срабатывает - блоки вообще перестают перетаскиваться. Важно: и у контейнера и у блоков не указан position: ни absolute ни relative (потому что в этом случае блоки неправильно перетаскиваются). Без попыток задать координаты блоков, каждый следующий блок появляется ниже предыдущего, даже если тот предыдущий блок уже перетянут вверх. Подскажите как правильно можно задать координаты блока относительно контейнера id='constructor' ? |
begin,
вставить первым вновь создаваемый блок? и что это за конструкция Цитата:
|
Перефразирую: внутри контейнера id='constructor' я добавляю новые блоки. Мне нужно чтобы, когда я добавляю такой очередной новый блок, задавать ему нужные мне координаты относительно контейнера. Без этого каждый новый блок появляется все ниже и ниже.
А эта строка - все, что я смог найти подходящего для работы с координатами у 'draggable'. Все справки дают примеры как узнать координаты или сдвиги, а не как задать их. |
begin,
макет сделайте |
Цитата:
|
begin,
пример
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>
#constructor{
padding:0px;
width:335px;height:335px ;
background-color: #4169E1;
}
#constructor div{
width:40px;height:40px ;
background-color: #DEB887;
position: absolute;
}
</style>
<script type='text/javascript'>
$(window).load(function () {
var id = 0;
$('#add').click(function ()
{ id++;
$('#constructor').append("<div id='item_" + id + "'>текст</div>");
$('#item_' + id).draggable({containment:'parent',zIndex:id});
})
});
</script>
</head>
<body>
<input name="" type="button" value="добавить блок" id="add">
<div id="constructor" class=""></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:14. |