Redimensionner, Clone, glisser/déplacer et faire pivoter l'image à l'aide Jquery & Javascript

Question

HI Tous,

Je veux atteindre le Redimensionner, Clone, glisser/déplacer et faire pivoter la fonctionnalité sur une image seleted par les user.I suis en mesure faire tout cela dans une fonction séparée, mais ne pouvait pas incorporer dans une seule fonction. Puisque les images sont créées dynamiquement, j'ai besoin d'une seule fonction. Par exemple, si je rejoins Drag, Drop, Clone avec rezizable, cela ne fonctionne pas comme prévu.

Merci

MISE À JOUR

Je suis en mesure de réaliser les fonctionnalités, mais pas comme je m'y attendais. 1.Comment faire pivoter l'image lâchée?
2. Je ne pouvais pas faire glisser après la chute en raison du redimensionnement de la requête en direct j'ai ajouté séparément.
3.Le Hide() ne fait que masquer l'image, mais la poignée de redimensionnement reste visible pour les utilisateurs. Comment supprimer la resizable() pendant Hide() ou y a-t-il des 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 


    }); 

est en dessous du code de travail pour la rotation de l'image, mais ne fonctionne pas pour objet tombé

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

    }); 

Toute suggestion me aidera à aller plus loin.

Merci

Answer 1

Voici a jQuery plugin to do that. Et puis aussi jCrop: deepliquid.com/content/Jcrop.html

Answer 2

Espérons que cela pourrait aider un peu.

JQuery Partie:

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

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

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