Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2015, 23:11
kay kay вне форума
Интересующийся
Отправить личное сообщение для kay Посмотреть профиль Найти все сообщения от kay
 
Регистрация: 09.03.2012
Сообщений: 15

Доработка скрипта для динамических DIVов
Здравствуйте.

Есть скрипт, который позволяет с помощью мыши перемещать DIVы по странице, а так же выбирать из них активный (поверх остальных). Такое решение стало необходимым для размещения на странице нескольких видеотрансляций.
Прошу помочь в доработке данного скрипта, чтобы DIVы можно было ещё и растягивать мышью по ширине и длине.
Скрипт:
function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }

function dragOBJ(d,e) {

var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;

    function drag(e) { if(!stop) { d.style.zIndex = 1; d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}

<div class="my" style="width:640px; position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event);">Первый ДИВ</div>
<div class="my" style="width:640px; position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event);">Второй ДИВ</div>


Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2015, 09:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от kay
Прошу помочь в доработке данного скрипта, чтобы DIVы можно было ещё и растягивать мышью по ширине и длине.
Вот тебе теоретический курс
http://javascript.ru/ui/draganddrop
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2015, 09:32
kay kay вне форума
Интересующийся
Отправить личное сообщение для kay Посмотреть профиль Найти все сообщения от kay
 
Регистрация: 09.03.2012
Сообщений: 15

Спасибо за ссылку, но хотелось бы практической помощи.
Думаю доработанный скрипт пригодится многим.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2015, 10:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

Сообщение от kay
перемещать DIVы по странице
http://jqueryui.com/draggable/
Сообщение от kay
ещё и растягивать мышью по ширине и длине.
http://jqueryui.com/resizable/
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2015, 10:19
kay kay вне форума
Интересующийся
Отправить личное сообщение для kay Посмотреть профиль Найти все сообщения от kay
 
Регистрация: 09.03.2012
Сообщений: 15

Сообщение от рони Посмотреть сообщение
http://jqueryui.com/draggable/
http://jqueryui.com/resizable/
Спасибо, но использовать jQuery не хотелось бы, чтобы не усложнять решение, которое нужно реализовать в одном файле.
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2015, 21:04
kay kay вне форума
Интересующийся
Отправить личное сообщение для kay Посмотреть профиль Найти все сообщения от kay
 
Регистрация: 09.03.2012
Сообщений: 15

Разобрался, вот результат, может по прежнему кому-то пригодится:
function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function dragOBJ(d,e) {
var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;
    function drag(e) { if(!stop) { d.style.zIndex = 1; d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }
    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
    var oW=parseInt(d.style.width),oH=parseInt(d.style.height);
    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}
function dragOBJ2(d,e) {
var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;
    function drag2(e) { if(!stop) { d.style.zIndex = 1; d.style.height=(xy(e,1)+oH-eY+'px'); d.style.width=(xy(e)+oW-eX+'px'); } }
    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
    var oW=parseInt(d.style.width),oH=parseInt(d.style.height);
    document.onmousemove=drag2; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}

<div class="my" style="background: black; width:640px; height:480px; position: relative; top: 0; left: 0" onmousedown="if(event.button == 0) dragOBJ(this,event);if(event.button == 1) dragOBJ2(this,event);if(event.button == 2) dragOBJ2(this,event);">Первый ДИВ</div>
<div class="my" style="background: black; width:640px; height:480px; position: relative; top: 0; left: 0" onmousedown="if(event.button == 0) dragOBJ(this,event);if(event.button == 1) dragOBJ2(this,event);if(event.button == 2) dragOBJ2(this,event);">Второй ДИВ</div>

Левой кнопкой мыши перемещаем DIVы, правой и нажатым колесом - растягиваем их.

Прошу специалистов помочь. Необходимо в cookies сохранить значения стилей, чтобы при загрузке страницы загружались значения сначала оттуда, а при каких-то изменениях в стилях DIVов, новые значения записывались в cookies, не ограниченных по времени жизни.
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2015, 08:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от kay
Необходимо в cookies сохранить значения стилей
Можно использовать локальное хранилище...
http://htmlbook.ru/html5/storage

А вот по кукам
http://www.codenet.ru/webmast/js/Cookies.php
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2015, 11:57
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от kay
вот результат
Итерационный гавнокод.
Ответить с цитированием
  #9 (permalink)  
Старый 25.04.2015, 09:50
kay kay вне форума
Интересующийся
Отправить личное сообщение для kay Посмотреть профиль Найти все сообщения от kay
 
Регистрация: 09.03.2012
Сообщений: 15

Сообщение от kostyanet Посмотреть сообщение
Итерационный гавнокод.
С учетом того, что я не считаю себя программистом, и опыта нет совсем, задачу всё же выполнил. Если можешь сделать то же самое, но лучше - покажи как надо, а не понтуйся!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить данные из php скрипта в расширении для Safari? housewm Opera, Safari и др. 2 19.12.2013 18:31
доработка скрипта под версию jquery 1.8 Михаил Мел Events/DOM/Window 0 08.08.2013 09:03
Как поставить тайм-аут для выполнения скрипта cln2008 Общие вопросы Javascript 7 23.09.2009 14:57
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 18:27
Вызов скрипта для Opera Andrew_S Общие вопросы Javascript 8 25.09.2008 12:23