Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2014, 17:00
Новичок на форуме
Отправить личное сообщение для begin Посмотреть профиль Найти все сообщения от begin
 
Регистрация: 20.11.2009
Сообщений: 7

Как задать координаты для 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' ?
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2014, 17:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

begin,
вставить первым вновь создаваемый блок?
и что это за конструкция
Сообщение от begin
$('#item_' + id).data('draggable').offset.click.top = 0;
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2014, 17:42
Новичок на форуме
Отправить личное сообщение для begin Посмотреть профиль Найти все сообщения от begin
 
Регистрация: 20.11.2009
Сообщений: 7

Перефразирую: внутри контейнера id='constructor' я добавляю новые блоки. Мне нужно чтобы, когда я добавляю такой очередной новый блок, задавать ему нужные мне координаты относительно контейнера. Без этого каждый новый блок появляется все ниже и ниже.
А эта строка - все, что я смог найти подходящего для работы с координатами у 'draggable'. Все справки дают примеры как узнать координаты или сдвиги, а не как задать их.
Ответить с цитированием
  #4 (permalink)  
Старый 16.05.2014, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

begin,
макет сделайте
Ответить с цитированием
  #5 (permalink)  
Старый 16.05.2014, 20:08
Новичок на форуме
Отправить личное сообщение для begin Посмотреть профиль Найти все сообщения от begin
 
Регистрация: 20.11.2009
Сообщений: 7

Сообщение от рони Посмотреть сообщение
begin,
макет сделайте
всмысле выложить полный код страницы или нарисовать схему?
Ответить с цитированием
  #6 (permalink)  
Старый 16.05.2014, 20:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
задать hover для элемента bushstas Элементы интерфейса 43 28.11.2019 14:39
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
как для File.openDialog задать папку Averin500 Events/DOM/Window 2 06.01.2013 00:40
Как задать координаты курсора?? Tums37 Общие вопросы Javascript 6 25.11.2011 16:57
Как задать условие в jquery чтобы он проводил линию.. voloxa89 Элементы интерфейса 7 17.08.2011 10:00