Здравствуйте. Вот такой вот возник вопрос. Но как решить не знаю.
Сама модель такова: есть картинка которая спрятана и появляется тогда когда нажимают на кнопку. Плюс её можно клонировать нажав еще раз на кнопку либо удалить. При этом картинку можно перемещать по экрану. Вот это все получилось.
А теперь еще нужно что бы картинка поворачивалась в разные стороны. И это получилось (рядом с картинкой кнопка с круговой стрелкой нажав на нее можно вращать картинку) но этот механизм применим только к одной картинке, если она находится за пределами дива который клонирует его.
А вот как сделать так, что бы можно было крутить любую из клонированных картинок не пойму.
Вот сам код.
Подключенные скрипты:
<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 в скрипте по повороту картинок сделать класс, что бы было применимо ко всем картинкам, но как это сделать что то не соображу.
