Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2020, 18:21
Новичок на форуме
Отправить личное сообщение для Newb Посмотреть профиль Найти все сообщения от Newb
 
Регистрация: 08.04.2020
Сообщений: 6

Перетаскивание нижнего слоя (по z-index)
Доброго времени, форум. Не знаю, как правильно сформулировать задачу, поясню на примере.

Имеем 2 картинки, одна глухая с прозрачным кругом в середине (считай, иллюминатор, другая фон моря.

<img src="bg.jpg" id="draggable">
<canvas id="okno"></canvas>


Канвас с абсолютным позиционированием, чтобы накрывал собой море, оставляя в середине за счет прозрачности кусок (круг) моря.

Вопрос в функции draggable(). Если тащить фон (море) за края, выходящие за предел canvas, то перетаскивание норм. Но на самом канвасе я, само собой, таскать фон не могу, т.к. у канваса z-index выше.

Направьте, за счет чего можно сохранить порядок, при этом иметь возможность перетаскивать фон при нажатии в области canvas?
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2020, 18:50
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Что за функция draggable()?
Тащить надо фон (img) отдельно от "илюминатора" (canvas) или вместе с ним?
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2020, 21:56
Новичок на форуме
Отправить личное сообщение для Newb Посмотреть профиль Найти все сообщения от Newb
 
Регистрация: 08.04.2020
Сообщений: 6

Сообщение от voraa Посмотреть сообщение
Что за функция draggable()?
$('#draggable').draggable();
Сообщение от voraa Посмотреть сообщение
Тащить надо фон (img) отдельно от "илюминатора" (canvas) или вместе с ним?
Отдельно. Фон "физически" лежит под канвасом. Выступающие области фона за канвас перетягиваются, на самом канвасе нет (и я понимаю, что так и должно быть).

Мне сложно сформулировать, т.к. я PHP программер и по части jquery работал прежде только с hide(),show() для мобильной адаптации и ajax-запросы.

Но тут задача требует прохождения этого этапа. Само собой, я сяду за полноценное изучение jquery, но хотелось бы уже разгрузить голову от этого момента.

Вот, что видится мне, но не знаю какие функции для этого изучать.

1. Есть главный блок (div), в котором лежат и canvas, и фон.
2. draggable вешаю на на главный div
3. При обработке события dragabble на главном диве событие переназначается фону.

Так возможно?
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2020, 12:01
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Как это сделать с jquery и draggable я не знаю
Но в принципе идея верная. Но надо на главный div вешать события mousedown, mousemove, mouseup и по ним двигать фон
Как то так получается
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 <style>
img {
	position: absolute;
	display: block;
	width: 300px;
	left: 150px;
	top: 100px;
}
canvas {
	position: absolute;
}

 
 </style>
<script>
document.addEventListener('DOMContentLoaded', async () => {
let par, fon, okno;

const imgloaded = (img) => {
	return new Promise ((res, rej) => {
		if (img.complete) res (img)
		img.onload = () => res (img)
	})
}

const drawokno = () => {
	const ctx = okno.getContext('2d')
	const w = okno.offsetWidth;
	const h = okno.offsetHeight;
	ctx.fillStyle = '#c0c0c0';
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(w, 0);
    ctx.lineTo(w, h);
    ctx.lineTo(0, h);
    ctx.lineTo(0, 0);
	ctx.arc(w/2, h/2, h/2, 0, Math.PI * 2, true);
	ctx.fill('nonzero');
}


const drag = () => {
	let x, y; 
	const msmove = (ev) => {
		let dx = ev.clientX - x;
		let dy = ev.clientY - y;
		fon.style.left = parseFloat(getComputedStyle(fon).left) + dx +'px';
		fon.style.top = parseFloat(getComputedStyle(fon).top) + dy +'px';
		x += dx;
		y += dy;
		ev.preventDefault()
	}

	const msup = (ev) => {
		par.removeEventListener ('mousemove', msmove)
		par.removeEventListener ('mouseup', msup)
	}
	
	par.addEventListener ('mousedown', (ev) => {
		const cr = fon.getBoundingClientRect()
		x = ev.clientX;
		y = ev.clientY;
		if (x < cr.left || cr.right < x || y < cr.top || cr.bottom < y) return;
		par.addEventListener ('mousemove', msmove)
		par.addEventListener ('mouseup', msup)
		ev.preventDefault()		  
	})
}
	
	
	fon = document.getElementById('fon')
	par = document.getElementById('par')
	okno = document.getElementById('okno')
	await imgloaded (fon)
		let fonst = getComputedStyle(fon)
		okno.style.left = fonst.left;
		okno.style.top = fonst.top;
		okno.width = parseFloat(fonst.width);
		okno.height = parseFloat(fonst.height);
		drawokno ()
		drag ()
})
</script>
</head>
<body>
<div id='par'>
	<img src="https://images.aif.ru/011/938/71c8b30142a321f2696bbf49a635d1c2.jpg" id="fon">
	<canvas id='okno'></canvas>
</body>
</html>

Последний раз редактировалось voraa, 09.04.2020 в 12:05.
Ответить с цитированием
  #5 (permalink)  
Старый 09.04.2020, 17:38
Новичок на форуме
Отправить личное сообщение для Newb Посмотреть профиль Найти все сообщения от Newb
 
Регистрация: 08.04.2020
Сообщений: 6

Большое спасибо, что потратили время и реализовали. Я параллельно пошел аналогичным путём: подсчет смещения главного дива по осям. Ваш код я изучу подробно в плане функций, но пока продолжаю поиск.

Теперь могу сформулировать вопрос конкретно: как сделать элемент (класс) активным при наведении на область? Чтобы не смотря на вёрстку/позиционирование, произошло обращение к конкретному классу.

Вот еще аналогия на примере фотошопа: имеем несколько слоёв, выделен нижний. При использовании элемента перемещения двигается выделенный слой (нижний).
Ответить с цитированием
  #6 (permalink)  
Старый 09.04.2020, 23:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Сообщение от Newb Посмотреть сообщение
Теперь могу сформулировать вопрос конкретно: как сделать элемент (класс) активным при наведении на область? Чтобы не смотря на вёрстку/позиционирование, произошло обращение к конкретному классу.

Вот еще аналогия на примере фотошопа: имеем несколько слоёв, выделен нижний. При использовании элемента перемещения двигается выделенный слой (нижний).
Не совсем понял вашу терминологию, что такое элемент - понятно. А что вы называете классом? Класс CSS? Что такое активный? Кто должен обращаться к классу? элементу?
Если можно конкретизируйте вопрос
Ответить с цитированием
  #7 (permalink)  
Старый 09.04.2020, 23:32
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,007

Канве задать стиль

pointer-events: none

Тогда она станет прозрачной для мыши, и можно повесить draggable на картинку
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2020, 22:50
Новичок на форуме
Отправить личное сообщение для Newb Посмотреть профиль Найти все сообщения от Newb
 
Регистрация: 08.04.2020
Сообщений: 6

Сообщение от Alexandroppolus Посмотреть сообщение
Канве задать стиль

pointer-events: none

Тогда она станет прозрачной для мыши, и можно повесить draggable на картинку
Огромное спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2020, 22:51
Новичок на форуме
Отправить личное сообщение для Newb Посмотреть профиль Найти все сообщения от Newb
 
Регистрация: 08.04.2020
Сообщений: 6

Сообщение от voraa Посмотреть сообщение
Не совсем понял вашу терминологию, что такое элемент - понятно. А что вы называете классом? Класс CSS? Что такое активный? Кто должен обращаться к классу? элементу?
Если можно конкретизируйте вопрос
Элемент с классом CSS. Активный - кто принимает событие (наведение мыши).
Ответить с цитированием
  #10 (permalink)  
Старый 12.04.2020, 07:26
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Сообщение от Newb Посмотреть сообщение
Теперь могу сформулировать вопрос конкретно: как сделать элемент (класс) активным при наведении на область? Чтобы не смотря на вёрстку/позиционирование, произошло обращение к конкретному классу.
События от мыши всегда принимает тот элемент, над которым находится курсор. Если элемент перекрывается другим, то можно этот верхний исключить свойством pointer-events: none;, как посоветовал Alexandroppolus.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перетаскивание внутри ifram'a. kodemak Общие вопросы Javascript 2 14.01.2014 09:24
Разметка для Google closure compiler monolithed Оффтопик 11 04.09.2013 00:50
Подскажите как лучше положить .xml документ в базу Гробовщик Серверные языки и технологии 4 02.09.2013 11:15
Неправильно работает перетаскивание слоя Enters Internet Explorer 2 16.06.2011 10:24
скрол мышкой картинки внутри слоя snk Элементы интерфейса 7 07.09.2010 18:22