Помощник
|
Слои и перетягивание |
delegree
|
Сообщение
#1
|
||
|
|
||
|
|||
Degradator |
3.8.2015, 14:32;
Ответить: Degradator
Сообщение
#2
|
|
Тут вопрос в том как сделать dragNDrop. Для этого есть уже тысяча и одна реализация, посмотри например
http://madrobby.github.io/scriptaculous/sortable-lists-demo/ https://jqueryui.com/draggable/ |
|
|
karssen |
3.8.2015, 17:51;
Ответить: karssen
Сообщение
#3
|
|
|
Ток такой вариант могу предложить. Есть еще вариант сделать блоки 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>
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
слои | 4 | dimjan4 | 6924 | 30.7.2008, 19:50 автор: -TiP- |
Текстовая версия | Сейчас: 25.4.2024, 21:34 |