Resize, clone, drag and drop images using jquery & javascript

Question

HI Everything

I want to achieve resizing, cloning, dragging and rotating on the image that will be shown to the user. I can do all this in a separate function, but I cannot include it in one function. Since images are dynamically created, I need one function. For example, if I join Drag, Drop, Clone with rezizable, it does not work properly.

thank

UPDATED

I can achieve functionality, but not in the way I expected. 1. How to rotate a fallen image?
 2.I could not drag after reset due to resizing of the current request, which I added separately.
 3. Hide () only hides the image, but the resize handle is still visible to users. How to remove resizable () while Hide () or is there any 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


  });

Below is the working code to rotate the image, but does not work for the discarded object

        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;
            }
        });

    });

Any suggestion will help me continue.

thank

Answer 1

Here's the jQuery plugin for this . And then also jCrop: deepliquid.com/content/Jcrop.html

Answer 2

Hope this helps a bit.

JQuery:

 $(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>