Resize,Clone,Drag/Drop and rotate image using Jquery & Javascript

Question

HI All,

I want to achieve the Resize,Clone,Drag/Drop and rotate functionality on an image seleted by the user.I am able to do all these in separate function ,but couldn't incorporate in single function. Since the images are dynamically created,i need a single function. For example If i join Drag,Drop,Clone with rezizable it's not working as expected.

Thanks

UPDATED

I am able to achieve the functionalities but not as i expected . 1.How to rotate the dropped Image ?
2.I couldn't drag after dropping because of resizing live query i added seperatly.
3.The Hide() only hides the image,but the resize handle still visible to users.How to remove the resizable() during Hide() or is there any remove() is there?

 $(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 for image rotation ,but not working for dropped 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 to proceed further.

Thanks

Answer 1

Here's a jQuery plugin to do that. And then also jCrop: deepliquid.com/content/Jcrop.html