Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как сделать поворот DIV клонов (https://javascript.ru/forum/dom-window/62590-kak-sdelat-povorot-div-klonov.html)

alexgrenn 18.04.2016 17:01

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

рони 18.04.2016 17:10

Цитата:

Сообщение от alexgrenn
для перемещения картинок я использую этот скрипт

http://jqueryui.com/draggable/

alexgrenn 18.04.2016 17:15

но он только перемещает а мне еще и крутить нужно. Я как раз перемещение поборол ))) Картинки дублируются и перемещаются а вот с поворотами никак(

рони 18.04.2016 19:42

alexgrenn,
создали и проинициализируйте клон

alexgrenn 18.04.2016 21:58

вот у меня создается клон к нему применяется класс который отвечает за перемещение а так же id который добавляет к диву возможность его крутить. Но возможность крутит только один див((


Часовой пояс GMT +3, время: 03:35.