Слои и перетягивание - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Слои и перетягивание

Опции

delegree

Topic Starter сообщение

1.8.2015, 18:43; Ответить: delegree

Сообщение #1

Группа: User
Сообщений: 7
Регистрация: 13.10.2014
Поблагодарили: 0 раз
Репутация:

Доброго вечера. Помогите пожалуйста разобраться с реализацией задумки (составлением алгоритма) :rolleyes:

Нужно реализовать перетягивание при помощи кнопки с постепенным изменением видимости блоков.

Для наглядности набросал:

[IMG]http://screenshot.ru/upload/images/2015/08/01/d4f37b8edc1b7150.png[/IMG]

Есть блок 1 и блок 2
Нужно установить их на одном месте (чтобы лежали друг на друге), и допустим синий будет на слой выше красного.
На самом верхнем слое располагается кнопка для перетягивания влево-вправо.
Как только кнопка зажимается и тащится влево или вправо - width синего блока уменьшается/увеличивается, тем самым прикрывая красный блок.
Сама позиция кнопки соответственно тоже перемещается.

Ответить с цитированием данного сообщения

Degradator Degradator 3.8.2015, 14:32; Сообщений: 2113 Поблагодарили: 17 раз Репутация: 8 Просмотр профиля	3.8.2015, 14:32; Ответить: Degradator Сообщение #2
0 Группа: Active User Сообщений: 2113 Регистрация: 2.7.2012 Поблагодарили: 17 раз Репутация: 8	Тут вопрос в том как сделать dragNDrop. Для этого есть уже тысяча и одна реализация, посмотри например http://madrobby.github.io/scriptaculous/sortable-lists-demo/ https://jqueryui.com/draggable/

karssen

3.8.2015, 17:51; Ответить: karssen

Сообщение #3

Новичок

Группа: Viewer
Сообщений: 0
Регистрация: 30.9.2015
Поблагодарили: 0 раз
Репутация:

Ток такой вариант могу предложить. Есть еще вариант сделать блоки resizble но как не придумал)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
window.onload=function(){
$(document).ready(function(){
$('#wrapper').mousemove(function(e){
var sep = $(this).children('.separator');
var left = $('#wrapper').offset().left;
var top = $('#wrapper').offset().top;
if(e.clientX >= left && e.clientX <= (left + 395)){
sep.offset({top:top, left:e.clientX});
var a = 400 - (e.clientX - left)
$('.vertical2').width(a)
}
});
})
}

</script>
<style>
#wrapper{
width:400px;
margin:0 auto;
position:relative;
}
.vertical1 {
width:400px;
height:200px;
background-color:red;
position:absolute;
background-image: url(http://javascript.ru/img/ws_1.png);
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}
.vertical2 {
width:400px;
height:200px;
background-color:blue;
position:absolute;
right: 0;
background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
.separator{
width:5px;
height:200px;
background-color:black;
position:absolute;
z-index:2;
}

</style>
</head>
<body>
<div id="wrapper">
<div class='vertical1'>

</div>
<div class='vertical2'>

</div>
<div class="separator">
</div>
</div>

</body>
</html>

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

	Тема	Ответов	Автор	Просмотров	Последний ответ
	слои	4	dimjan4	4447	30.7.2008, 19:50 автор: -TiP-

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 23.4.2021, 1:37

Дизайн