jQuery resizable() 图像在 draggable() 中工作 div

Question

目前我有图片上传表单，我们可以在其中上传多张图片并将该图片拖到 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();
              } 
});

在这里，当我上传图片时，它会显示在 new-multiple div 上。我也可以拖动这些图像。

js 文件：https://jsfiddle.net/vd11qyzv/1/

但是无法调整大小。请帮忙。

Answer 1

第一个：

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

这将失败，您将看到：

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

这可以通过使用正确的函数名称来解决：

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

其次，您可以做很多事情来清理和改进您的代码。

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

运行这段测试代码(https://jsfiddle.net/Twisty/vd11qyzv/2/)，你得到以下HTML输出：

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

您可以看到 draggable 和 resizable 都为它们各自的元素定义了。

更新

在作业中发现一个小问题。交换 .resizable() 和 .appendTo()，因为可调整大小似乎在附加之前分配有问题。

工作示例：https://jsfiddle.net/Twisty/vd11qyzv/3/

我还添加了一些样式以帮助确保可拖动和可调整大小不会冲突。

jQuery resizable() 图像在 draggable() 中工作 div

jQuery resizable() image working in draggable() div

javascript

jquery

jquery-ui

image-resizing