Question

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

（从ajax收到的html示例。###### =通过ajax传递给它的instanceID，因此每个实例的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附加到画布有关，但我不确定。我对标准的javascript比我对jQuery的voodoo更熟悉所以任何帮助都会非常感激。

以下是以下代码，此处是指向正在运行的示例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;
    }
}

动态添加元素时，JQuery可调整大小的问题

1 个答案: