Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery selectable, draggable, плагин ui 
:(
    Опции темы
MrDmitry
Дата 23.10.2013, 16:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет
Помогите уже сломал всю голову. Как написал в описании темы, использую плагин jquery.ui. Есть следующий код


Код

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <script type="text/javascript" src="JavaScript/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="Ui/js/jquery-ui-1.10.3.custom.js"></script>             
    <link rel="stylesheet" type="text/css" href="Ui/css/ui-lightness/jquery-ui-1.10.3.custom.css">     
    <script type="text/javascript">  $(document).ready(function () {
  $("#work").selectable({tolerance:'fit', selected: function(event, ui) {
   alert(ui.selected.id);
   }
  });
  $("#test").draggable();
  $("#test2").draggable();
});
</script>
    <style>
      #work {width:100%; height:1000px;  position:relative;}
#test {
height:400px;
width:600px;
border:1px solid #000; 
position:relative;
left:300px;
top:75px;
}
#test #test2 {
height:95px;
width:100px;
border:1px solid #000;
position:relative;
left:50px;
top:40px;
}
#test3 {
height:30px;
width:50px;
border:1px solid #000;
position:absolute;
left:50px;
top:40px;
} 
    </style>
    <body>     
     <div id="work"> 
      <div id="test"><div id="test2"> </div></div>
     </div>
     
    </body>   
</html>




Задача: нужно если событие selectable произошло внутри слоя test вывести его id, также со слоем test2.

Проблема: Т.к слои test и test2 являются перемещаемыми (draggable) то и событие selectable на них не срабатывает. Событие selectable срабатывает если весь слой test или test2 находится внутри выделения.  

Я пытался решить проблему путем добавления еще одного  слоя с z-index 0. Таким способом выделение проходит и внутри слоев но id элементов не определяется

Это сообщение отредактировал(а) MrDmitry - 23.10.2013, 16:23
PM MAIL   Вверх
MrDmitry
Дата 24.10.2013, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет
Ни у кого нет ни каких идей? (
PM MAIL   Вверх
MrDmitry
Дата 25.10.2013, 02:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет
В общем башка уже не варит, время 5 утра. Попытался сделать так и тоже не получается


Код
   $("#work").selectable({ 
          start: function (event) {
    startX = event.pageX; //Начальные координаты мыши
    startY = event.pageY;
   },
   stop: function(event){
    stopX = event.pageX;  //Конечные координаты мыши
    stopY = event.pageY;
   },
   selected: function(event, ui) {
    id = ui.selected.id;  //перебираем id выбранных элементов
    childX = $("#"+id).offset().left; //левая позиция выбранного элемента
    childY = $("#"+id).offset().top; //Верхняя позиция выбранного элемента
    childH = $("#"+id).height();//Размеры выбранного элемента
    childW = $("#"+id).width();
    objectW = stopX-startX; //Размеры выбранной области
    objectH = stopY-startY;
    if(startX>=childX || stopX<=childX)//Если начальные координаты входят в элемент и не выходят за его пределы по оси X
     {
      if(startY>=childY || stopY<=childY)//Если начальные координаты входят в элемент и не выходят за его пределы по оси Y то
       {
        new_id = id; //данный элемент то что нам нужно
        alert("Выделен id:"+new_id ); 
       }
     }
    id = " "; 
   }            
  });  
})
;

Это сообщение отредактировал(а) MrDmitry - 25.10.2013, 02:04
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0387 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.