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

在这里，当我上传图片时，它将显示在新的多重div上。我也可以拖动这些图像。

js fidle：https://jsfiddle.net/vd11qyzv/1/

但是无法恢复工作。请帮忙。

Answer 1

首先：

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

这将失败，你会看到：

TypeError：$（...）。resizble不是函数

使用正确的函数名称修复此问题：

$( ".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中工作

1 个答案: