Question

我从here下载插件以用于jquery图像拖动调整大小旋转它适用于单个图像但我想要很多图像这就是为什么我添加了动态内容但是它没有工作。我的代码出错了
Plugin demo

mycode的

Html

  <div class="draggable-zone">
        <div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;">
            <div class="resizable-wrapper">             
                <img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" />
            </div>
        </div>
    </div>

    <button onclick="call()">Button</button>

的Javascript

  <script type="text/javascript">
$(document).ready(function() {
    var drWr = $('.draggable-wrapper'),
        rsWr = $('.resizable-wrapper'),
        elem = $('.elem-wrapper');

    elem.resizable({
        aspectRatio: true,
        handles:     'ne, nw, se, sw'
    });

    drWr.draggable();

    elem.parent().rotatable();


    $(".ui-rotatable-handle").live("click",function(){
        alert('fg')

        });
});

function call(){

var s='<div class="draggable-zone"><div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;"><div class="resizable-wrapper"><img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" /></div></div></div>';
$(s).appendTo(".draggable-zone");
var drWr = $('.draggable-wrapper'),
        rsWr = $('.resizable-wrapper'),
        elem = $('.elem-wrapper');

    elem.resizable({
        aspectRatio: true,
        handles:     'ne, nw, se, sw'
    });

    drWr.draggable();

    elem.parent().rotatable();
}
</script>

由于

Answer 1

最后我找到了解决方案

    var count=2;
    function call(){
    count++;
    var s='<div class="draggable-zone" id="draggable_'+count+'"><div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;" id="wrapper_'+count+'"><div class="resizable-wrapper" id="resizable_'+count+'"><img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" id="elem_'+count+'" /></div></div></div>';

    $(s).appendTo("#all");

    var drWr = $('#'+"draggable_"+count),
            rsWr = $('#'+"wrapper_"+count),
            elem = $('#'+"elem_"+count);
        elem.resizable({
            aspectRatio: true,
            handles:     'ne, nw, se, sw'
        });

        drWr.draggable();

        elem.parent().rotatable();
    }

的 HTML

<div id="all"> <div class="draggable-zone" id="draggable_1"> <div class="draggable-wrapper" id="wrapper_1" style="width: 150px; height: 150px; left: 225px; top: 175px;" > <div class="resizable-wrapper" id="resizable_1"> <img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" id="elem_1" /> </div> </div> </div>

Jquery动态内容图像旋转不起作用？

1 个答案:

的 HTML