jQuery redimensionnable image() travaillant dans draggable() div

Question

actuellement j'ai formulaire de téléchargement d'image dans lequel nous pouvons télécharger plusieurs images et faites glisser cette image à l'intérieur de la div.

S'il vous plaît voir ma forme

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file"> 

<div class="new-multiple"></div> 




$(function() { 

     var inputLocalFont = document.getElementById("user_file"); 
     inputLocalFont.addEventListener("change",previewImages,false); 

     function previewImages(){ 
      var fileList = this.files; 

      var anyWindow = window.URL || window.webkitURL; 

       for(var i = 0; i < fileList.length; i++){ 
        var objectUrl = anyWindow.createObjectURL(fileList[i]); 
        $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>'); 
        window.URL.revokeObjectURL(fileList[i]); 
       } 

       $(".img-div").draggable(); 
       $(".newly-added").resizble(); 
       } 
}); 

Ici i quand je télécharger des images, il affichera le nouveau multiple div. Aussi, je peux faire glisser ces images.

js fIDLE: https://jsfiddle.net/vd11qyzv/1/

Mais resizble ne fonctionne pas. S'il vous plaît aider.

Answer 1

Première:

$(".newly-added").resizble(); 

Cela échouera et vous verrez:

TypeError: $(...).resizble is not a function

Ce problème est résolu en utilisant le nom de la fonction appropriée:

$(".newly-added").resizable(); 

En second lieu, il y a une beaucoup vous pouvez faire pour nettoyer et améliorer votre code.

JavaScript

$(function() { 
    var inputLocalFont = $("#user_file"); 
    inputLocalFont.change(previewImages); 

    function previewImages(e) { 
    var fileList = this.files; 

    var anyWindow = window.URL || window.webkitURL; 

    $.each(fileList, function(key, val) { 
     var objectUrl = anyWindow.createObjectURL(val); 
     var $newDiv = $("<div>", { 
      id: "img-div-" + key, 
      class: "img-div" 
     }) 
     .draggable() 
     .appendTo($('.new-multiple')); 
     var $newImg = $("<img>", { 
      src: objectUrl, 
      id: "img-" + key, 
      class: "newly-added" 
     }) 
     .resizable() 
     .appendTo($newDiv); 
     window.URL.revokeObjectURL(val); 
    }); 
    } 
}); 

L'exécution de ce code de test (https://jsfiddle.net/Twisty/vd11qyzv/2/), vous ge la sortie HTML suivant:

<div class="new-multiple"> 
    <div id="img-div-0" class="img-div ui-draggable ui-draggable-handle" style="position: relative;"> 
    <img src="blob:https://fiddle.jshell.net/d2298075-5b2a-47b5-ac71-cc6c07bb1133" id="img-0" class="newly-added ui-resizable" style="margin: 0px; resize: none; position: static; display: block; height: 0px; width: 0px;"> 
    </div> 
</div> 

Vous pouvez voir draggable et redimensionnable sont tous deux définis pour leurs éléments respectifs.

MISE À JOUR

détecté un problème mineur dans l'affectation. L'échange .resizable() et .appendTo() comme redimensionnable semble avoir un problème avec être affecté avant d'être ajouté.

Exemple de travail: https://jsfiddle.net/Twisty/vd11qyzv/3/

J'ai aussi ajouté un peu de style pour aider à faire en sorte que draggable et redimensionnable ne sont pas incompatibles.