Question

全部好，

我希望在用户选择的图像上实现Resize，Clone，Drag / Drop和旋转功能。我能够在单独的功能中完成所有这些功能，但无法合并到单个功能中。由于图像是动态创建的，我需要一个功能。例如，如果我加入Drag，Drop，Clone并且可以重新调整，则它不能按预期工作。

由于

已更新

我能够实现功能但不像我预期的那样。 1.如何旋转掉落的图像？
2.由于调整后的实时查询大小，我无法拖动。我是单独添加的 3. Hide（）仅隐藏图像，但调整大小句柄仍然对用户可见。如何在Hide（）期间删除resizable（）或者是否有remove（）？

 $(function() {
      $('#frame img').live('mousemove', function(event) {
          $('#frame img').resizable();
      });
  });


  $(function() {
      $('#frame img').live('dblclick', function(event) {
          $(this).hide();
          //$(this).unbind("resizable"); not working
          //$(this).removeclass(); not working
      });
  });



  $(document).ready(function() {
      //Counter
      counter = 0;

      //Make element draggable
      $("img").draggable({
          helper: 'clone',
          containment: '#frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
               objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });

              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                      //console.log($(this).attr("id"));
                      //console.log(pos.left)
                      //console.log(pos.top)


                  }
              });
          }
      });

      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {

              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  var pos = $(ui.helper).offset();

                  counter++;
                  var element = $(ui.helper).clone();
                  var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

                  $(this).parent().css({
                      '-moz-transform': rotateCSS,
                      '-webkit-transform': rotateCSS
                  });
                  //var element = element1.resizable();
                  element.addClass("tempclass");

                  $(this).append(element);
                  $(".tempclass").attr("id", "clonediv" + counter);
                  //$(".tempclass").attr("onclick",function(){ $(this).remove(););

                  $("#clonediv" + counter).removeClass("tempclass");

                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)
                  //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
      //Make the element resizable


  });

下面是图像旋转的工作代码，但不适用于删除的对象

        var counter = 1;
    $(function() {
        $('#test').live('mousedown', function(event) {

            if ((counter > 0) && (counter < 350)) {
                $('#test').rotate(counter + 45);
                counter = counter + 45;
            }
            else if ((counter > -1) && (counter > 350)) {

                counter = 1;
            }
        });

    });

任何建议都会帮助我继续前进。

由于

Answer 1

这是a jQuery plugin to do that。然后还有jCrop：deepliquid.com/content/Jcrop.html

Answer 2

希望这可能会有所帮助。

JQuery Part：

 $(function(){  
 //Make every clone image unique.  
   var counts = [0];  
   $(".dragImg").draggable({
     helper: "clone",
     //Create counter
     start: function() { counts[0]++; }
    });

     $("#dropHere").droppable({
       drop: function(e, ui){
         $(this).append($(ui.helper).clone());
         //Pointing to the dragImg class in dropHere and add new class.
         $("#album .dragImg").addClass("item-"+counts[0]);
         //Remove the current class (ui-draggable and dragImg)
         $(".item-"+counts[0]).removeClass("ui-draggable dragImg");
         //Set class item to be able to drag.
         $(".item-"+counts[0]).draggable({
           helper: "clone",
         });
       }
      });
   });

HTML部分：

     <body>
       <div id="imgSrc">
         <div class="dragImg"><img src="YOUR IMAGE SOURCE HERE"></div>
       </div>

       <div id="dropHere"></div>
     </body>

使用Jquery＆amp ;;调整大小，克隆，拖放和旋转图像使用Javascript

2 个答案: