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

本文介绍了jQuery resizable()图像在draggable()div中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前，我有一张图片上传表格，可以在其中上传多张图片并将其拖动到div中.

currently i have image upload form in which we can upload multiple image and drag this image inside the 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上.我也可以拖动这些图像.

Here i when i upload images it will show on new-multiple div . Also i can drag these images.

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

但是可调整大小不起作用.请帮忙.

But resizble is not working . Please help .

推荐答案

首先:

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

这将失败，您将看到:

使用适当的函数名称可以解决此问题:

This is fixed by using the proper function name:

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

第二，您可以做很多事情来清理和改进代码.

Second, there is a lot you can do to clean up and improve your 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);
    });
  }
});

运行此测试代码( https://jsfiddle.net/Twisty/vd11qyzv/2/)，则生成以下HTML输出:

Running this test code (https://jsfiddle.net/Twisty/vd11qyzv/2/), you ge the following HTML output:

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

您可以看到可拖动和可调整大小分别针对它们各自的元素进行了定义.

You can see draggable and resizable are both defined for their respective elements.

更新

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

Found a minor issue in the assignment. Swap .resizable() and .appendTo() as resizable appears to have an issue with being assigned before being appended.

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

我还添加了一些样式，以确保可拖动和可调整大小的文件不会发生冲突.

I also added a bit of styling to help ensure that draggable and resizable do not conflict.

这篇关于jQuery resizable()图像在draggable()div中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

Resizable