[alexgrenn]

Здравствуйте. Вот такой вот возник вопрос. Но как решить не знаю.
Сама модель такова: есть картинка которая спрятана и появляется тогда когда нажимают на кнопку. Плюс её можно клонировать нажав еще раз на кнопку либо удалить. При этом картинку можно перемещать по экрану. Вот это все получилось.

А теперь еще нужно что бы картинка поворачивалась в разные стороны. И это получилось (рядом с картинкой кнопка с круговой стрелкой нажав на нее можно вращать картинку) но этот механизм применим только к одной картинке, если она находится за пределами дива который клонирует его.

А вот как сделать так, что бы можно было крутить любую из клонированных картинок не пойму.

Вот сам код.
Подключенные скрипты:

<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 в скрипте по повороту картинок сделать класс, что бы было применимо ко всем картинкам, но как это сделать что то не соображу.