jQuery resizable（）image draggable（）divで作業しています

Question

現在、私は複数の画像をアップロードしてこの画像をdiv内にドラッグできる画像アップロードフォームを用意しています。

私は画像をアップロードするとき、それは新しい-複数のdivに表示されます。ここ

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

私のフォームをご覧ください。また、私はこれらの画像をドラッグすることができます。 FIDLE

JS：https://jsfiddle.net/vd11qyzv/1/

しかしresizbleが機能していません。助けてください 。

Answer 1

まず：

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

これは失敗し、あなたが表示されます。これは、適切な関数名使用して固定されている

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

：

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

第二に、そこにありますあなたのコードを整理し、改善するためにできることはたくさんあります。あなたはドラッグやサイズ変更が可能なの両方が、それぞれの要素のために定義されて見ることができます

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

：あなたは、GE、以下のHTML出力を、このテストコード（https://jsfiddle.net/Twisty/vd11qyzv/2/）を実行している

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

。

UPDATE

は、割り当ての軽微な問題を発見しました。スクロール.resizable()と.appendTo()はサイズ変更可能なので、追加される前に割り当てられている問題があるようです。

の作業例：https://jsfiddle.net/Twisty/vd11qyzv/3/

私はまた、ドラッグしてサイズ変更が可能なが競合しないことを確保するために、スタイリングのビットを追加しました。