0

我正在开发一个拖放项目，需要将可调整大小的图像的克隆拖到拖放区。一旦它被放下，我希望克隆也可以调整大小和拖动。我不想创建克隆的克隆......只是能够移动它。我的目标是使图像的每个克隆都独立于原始图像。我的想法是我为原始文件指定一个 id，并在删除每个克隆时更改它的 id。我研究并注意到一般建议是将图像包装在标签中并使用图像的“alsoResize”调整其大小。我的问题是，一旦我创建了克隆并放下它，我就不能再调整它的大小或拖动它了。这是我正在使用的一些代码...

    <!doctype html>
    <html lang="en">
    <head>  
    <meta charset="utf-8">
    <title>draggable demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">  
    <style>  

        #draggable {    
            width: 100px;    
            height: 100px;    
            background: #ccc;  }  
        #drophere {
            width:600px;
            height:600px;
            border: 1px solid black;
            }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
      // set global id counter
      var gIDCnt = 0;
    </script>
    </head>
    <body style="width: 1000px; height: 800px;"> 

   <div id="draggable">Drag me</div> 
   <div id="img0" class="imgwrapper">
        <img class= "image" src="koala.jpg" style="height: 100px;" alt="Koala Bear" />
   </div> 
    <script>
     $(function(){

        $( "#draggable" ).resizable().draggable();

        $(".imgwrapper").resizable({
             aspectRatio: true,
             handles: 's,e,se',
             alsoResize: '.image'
        }).draggable({
            helper: "clone",
            revert: "invalid",
            appendTo: "body"
        });

        $("body").droppable({
        accept: ".draggable, .imgwrapper, .onQuestion, .image",
        drop: function (event, ui) {        

            var isOnQuestion = $(ui.draggable).hasClass("onQuestion");
            if (isOnQuestion == true) {
                // Have already dropped this once, don't use clone anymore
                var element = $(ui.draggable);
            } else {
                var element = $(ui.draggable).clone();
            };

             // Set the absolute position of object
            var offset = $(this).offset();
            var pos = $(ui.helper).offset();
            var x = pos.left - offset.left;
            var y = pos.top - offset.top;
            $(element).css({ "left": x, "top": y, "position": "absolute" });

            if (isOnQuestion == false) {
                 //alert("Not on Question");
                 $(element).removeClass("imgwrapper");
                 //$(element).resizable("destroy");
                 //$(element).draggable("destroy");
                 gIDCnt= gIDCnt + 1;
                 var nextID = gIDCnt.toString();
                 var cNextID = "img"+nextID;

                 //alert(" ID: "+cNextID);
                 // Update with new ID
                 $(element).prop("id",cNextID);
                 var curid = $(element).attr("id");
                 $(element).addClass("onQuestion");
                 //alert("id: "+$(element).attr('id'));
                 $(element).children(".image").addClass("imageOn");

                 $(element).children(".image").removeClass("image");
                 //alert("id: "+$(element).attr('id'));
                 var cToResize = "#img"+nextID+" > .imageon";
                 //alert("cToResize: "+cToResize);
                 // Here's where I tried to make resizable
                 //$(element).resizable();
                 //$(element).resizable("option",{
                 // alsoResize: cToResize,
                 // aspectRatio: true,
                 // });
                 $('#'+cNextID).draggable();
                 $(element).css({border: "1px solid red"});

          }     
            $("body").append(element);
        }
       });
    });

    </script>
    </body>
    </html>

我更新每个克隆图像的“id”，然后使用新的 id 作为调整大小的选择器进行调整大小。但是，如果我尝试破坏新克隆对象的调整大小和可拖动功能，然后尝试调整大小等。然后没有任何效果。您会在我的代码中注意到我注释掉了几个警报。我为每个克隆的对象添加了一个类（onQuestion），这样我就可以检测到它之前何时被放入 dropzone，这样我就不会再次尝试克隆它。我删除了原始类（imgWrapper）但是当我尝试执行时......

        $(element).resizable("destroy");
        $(element).draggable("destroy");

后面的代码都不会执行。我开始怀疑我是否需要研究使用事件处理程序。

有人有建议吗？

谢谢，肯

4

0 回答 0