Форум

begin · #1 (**permalink**) 16.05.2014, 17:00

Делаю конструктор блоков:

<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' ?

рони · #2 (**permalink**) 16.05.2014, 17:17

begin,
вставить первым вновь создаваемый блок?
и что это за конструкция

Сообщение от begin

$('#item_' + id).data('draggable').offset.click.top = 0;

begin · #3 (**permalink**) 16.05.2014, 17:42

Перефразирую: внутри контейнера id='constructor' я добавляю новые блоки. Мне нужно чтобы, когда я добавляю такой очередной новый блок, задавать ему нужные мне координаты относительно контейнера. Без этого каждый новый блок появляется все ниже и ниже.
А эта строка - все, что я смог найти подходящего для работы с координатами у 'draggable'. Все справки дают примеры как узнать координаты или сдвиги, а не как задать их.

рони · #4 (**permalink**) 16.05.2014, 18:53

begin,
макет сделайте

begin · #5 (**permalink**) 16.05.2014, 20:08

Сообщение от рони

begin,
макет сделайте

всмысле выложить полный код страницы или нарисовать схему?

рони · #6 (**permalink**) 16.05.2014, 20:14

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>

Форум

Справочник

Discord чат

Курсы javascript