Как сделать поворот DIV клонов
Здравствуйте. Вот такой вот возник вопрос. Но как решить не знаю.
Сама модель такова: есть картинка которая спрятана и появляется тогда когда нажимают на кнопку. Плюс её можно клонировать нажав еще раз на кнопку либо удалить. При этом картинку можно перемещать по экрану. Вот это все получилось. А теперь еще нужно что бы картинка поворачивалась в разные стороны. И это получилось (рядом с картинкой кнопка с круговой стрелкой нажав на нее можно вращать картинку) но этот механизм применим только к одной картинке, если она находится за пределами дива который клонирует его. А вот как сделать так, что бы можно было крутить любую из клонированных картинок не пойму. Вот сам код. Подключенные скрипты: <link rel="stylesheet" href="drag.css" type="text/css" /> <script language="JavaScript" type="text/javascript" src="drag.js"></script> <script src="jquery.ui.rotatable.js"></script> <link rel="stylesheet" href="jquery.ui.rotatable.css"> Скрипт поворота: $(document).ready(function() { var params = { start: function(event, ui) { console.log("Rotating started"); }, rotate: function(event, ui) { console.log("Rotating"); }, stop: function(event, ui) { console.log("Rotating stopped"); }, }; $('#target').rotatable( {handle: $(document.createElement('img')).attr('src', 'alternate_rotate.png')} ); }); Тело: <style> #template{ display: none; } </style> <div id="template"> <div class="block"> <div class="drag" id="target" style="width: 250px; padding: 20px; padding-right: 40px; margin-top: 20px"><img src="1.png"></div> <button class="remove">-</button> </div> </div> <button id="add">add +</button> <div id="wrapper"></div> И скрипт клонирования: $(function(){ var block = $('#template').children('.block'), wrapper = $('#wrapper'), addItem = $('#add'); addItem.on('click', function(){ var newItem = block.clone(); wrapper.append( newItem ); newItem.children('.remove').on('click', function(){ newItem.remove(); }); }); }); Да а для перемещения картинок я использую этот скрипт(это содержание drag.js): var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(e){ var evtobj=window.event? window.event : e this.targetobj=window.event? event.srcElement : e.target if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} this.offsetx=parseInt(this.targetobj.style.left) this.offsety=parseInt(this.targetobj.style.top) this.x=evtobj.clientX this.y=evtobj.clientY if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(e){ var evtobj=window.event? window.event : e if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" return false } } } dragobject.initialize() Не знаю правильно или нет я догадываюсь, что нужно вместо id в скрипте по повороту картинок сделать класс, что бы было применимо ко всем картинкам, но как это сделать что то не соображу. |
Цитата:
|
но он только перемещает а мне еще и крутить нужно. Я как раз перемещение поборол ))) Картинки дублируются и перемещаются а вот с поворотами никак(
|
alexgrenn,
создали и проинициализируйте клон |
вот у меня создается клон к нему применяется класс который отвечает за перемещение а так же id который добавляет к диву возможность его крутить. Но возможность крутит только один див((
|
Часовой пояс GMT +3, время: 21:07. |