Question

我正在进行拖放项目，需要将可调整大小的图像的克隆拖到dropzone。一旦它被删除，我希望克隆也可以调整大小和拖动。我不想创建克隆的克隆...只是能够移动它。我的目标是使图像的每个克隆独立于原始图像。我的想法是我指定了原始的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");

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

有人有建议吗？

谢谢，肯

Jquery拖放克隆的图像问题

0 个答案: