javascript - JQuery动态添加元素时调整大小的问题

Question

好的，所以我有这个脚本，它的作用是每次单击链接时都会对页面进行ajax调用，从ajax获取html元素将其放入mainCanvas元素中，然后将拖动和调整大小功能分配给它。

(从 ajax 接收的 html 示例。###### = 通过 ajax 传递给它的实例 ID，因此每个实例的 ID 都不同)

ajax.php

<div id="Image_######" style=" width:55px; height:55px; position: absolute;">
    <img class="Image_######" alt="" title="" src="http://www.imagemagick.org/Usage/thumbnails/hatching_orig.jpg" style="width: 100%; height: 100%;" />
</div>

我遇到的问题是，由于某种原因，只有最后一个元素能够调整大小，它们仍然可以拖动，但是一旦添加新元素，先前添加的元素的调整大小就会被破坏。

我想要做的是能够添加多个元素并调整它们的大小，而不仅仅是最后添加的元素。

我怀疑这可能与我将响应 html 附加到 Canvas 的方式有关，但我不确定。我对标准 javascript 比对 JQuery 巫毒更熟悉，所以任何帮助将不胜感激。

下面是代码，这是运行示例的链接 http://sheac.com/resize-problem/

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="media/css/_library/jquery/ui-lightness/jquery-ui-1.8.5.custom.css">

<script type="text/javascript" src="media/js/_library/jquery/jquery-1.4.2.js"></script> <!-- jQuery Base -->
<script type="text/javascript" src="media/js/_library/jquery/jquery-ui-1.8.5.custom.js"></script> <!-- jQuery User-Interface Base -->
<script type="text/javascript" src="media/js/_library/jquery/jquery.ui.resizable.js"></script>


<a href="#" onclick="getInstance();return false;">create new instance</a>
<br /><br />
<div id="mainCanvas" style="border: 1px solid #CCC; width: 1000px; height: 500px;"></div>


<script type="text/javascript" language="javascript">
//<![CDATA[
    var instanceID = 1000;
    var properties = ["draggable", "resizableImage"];


    function getInstance(){
        var instanceID = getNextInstanceID();
        $.get("ajax.php", {instanceID: instanceID},
            function(response){
                document.getElementById("mainCanvas").innerHTML += response;
                runProperties(instanceID);
            }           
        );
    }   

    function getNextInstanceID() {
        var iid = instanceID;
        instanceID++;
        return iid;
    }

    function runProperties(instanceID) {
        if (properties != undefined) {
            for (var t in properties) {
                assignProperty(properties[t], instanceID);
            }
        }
    }

    function assignProperty(property, instanceID) {
        switch(property) {
            case "draggable": 
                $("#Image_"+instanceID).addClass(property);
                $(function() {
                    $("." + property).draggable({
                        grid: [ 16, 16 ],
                        snap: false,
                        containment: "#mainCanvas",
                        scroll: false
                    });
                });
                break;
            case "resizableImage": 
                $("#Image_"+instanceID).addClass(property);
                $(function() {
                    $("." + property).resizable({
                        grid: [ 16, 16 ],
                        minWidth: 32,
                        maxWidth: 208,
                        minHeight: 32,
                        maxHeight: 208,
                        aspectRatio: 1/1
                    });
                });
                break;
        }
    }   
//]]>
</script>

Answer 1

您可以在“assignProperty”函数中使所有图像可拖动和调整大小。您只需要对新元素执行此操作:

function assignProperty(property, instanceID) {
    switch(property) {
        case "draggable": 
            $("#Image_"+instanceID).draggable({
                    grid: [ 16, 16 ],
                    snap: false,
                    containment: "#mainCanvas",
                    scroll: false
            });
            break;
        case "resizableImage": 
            $("#Image_"+instanceID).resizable({
                    grid: [ 16, 16 ],
                    minWidth: 32,
                    maxWidth: 208,
                    minHeight: 32,
                    maxHeight: 208,
                    aspectRatio: 1/1
            });
            break;
    }
}