Помощник
|
![]() |
![]() |
Сообщение
#1
|
||
![]() |
|
||
|
|||
![]() |
![]()
Сообщение
#2
|
![]() |
Тут вопрос в том как сделать dragNDrop. Для этого есть уже тысяча и одна реализация, посмотри например
http://madrobby.github.io/scriptaculous/sortable-lists-demo/ https://jqueryui.com/draggable/ |
|
|
![]() |
![]()
Сообщение
#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 | 4447 | 30.7.2008, 19:50 автор: -TiP- |
![]() |
Текстовая версия | Сейчас: 23.4.2021, 1:37 |