1

我从这里下载插件，用于 jquery 图像拖动调整大小旋转它适用于单个图像，但我想要很多图像，这就是我添加动态内容但它不起作用的原因。我的代码有什么问题
插件演示

我的代码

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>

谢谢

4

1 回答 1

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>
于 2013-04-30T13:14:51.983 回答