从桌面拖放图像并使其可调整大小

我正在尝试制作一个简单的页面，我可以在其中从桌面拖放图像，并使其在div中可调整大小。我可以拖放页面中已经定义的图像并调整其大小，但是一旦我从桌面上传它，它就无法调整大小。这是我的代码。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Draggable - Default functionality</title>
      <link rel="stylesheet" href="css/jquery-ui.css">
      <style>
    .draggable {
        width: 150px; 
        height: 150px; 
        padding: 0.5em; 
        float:left; /* important */
        position:relative; /* important(so we can absolutely position the description div */
    }
    div#droppable {
        border: 5px dashed #CCC;
        width:400px;
        font-family:Verdana;
    }
    }
    div#droppable li img {
        height: 30px;
    }
      </style>
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
    $( function() {
        $( ".draggable" ).draggable({

            // Find original position of dragged image.
            start: function(event, ui) {
                // Show start dragged position of image.
                var Startpos = $(this).position();
                $("div#start").text("START: nLeft: "+ Startpos.left + "nTop: " + Startpos.top);
            },
            // Find position where image is dropped.
            stop: function(event, ui) {
                // Show dropped position.
                var Stoppos = $(this).position();
                $("div#stop").text("STOP: nLeft: "+ Stoppos.left + "nTop: " + Stoppos.top);
            }
        });

        $('#droppable').on({
            'dragover dragenter': function(e) {
                e.preventDefault();
                e.stopPropagation();
            },
            'drop': function(e, ui) {
                //console.log(e.originalEvent instanceof DragEvent);
                var dataTransfer =  e.originalEvent.dataTransfer;
                if( dataTransfer && dataTransfer.files.length) {
                    e.preventDefault();
                    e.stopPropagation();
                    $.each( dataTransfer.files, function(i, file) { 
                      var reader = new FileReader();
                      reader.onload = $.proxy(function(file, $fileList, event) {
                        var img = file.type.match('image.*') ? "<img  id="resizable" src='" + event.target.result + "' /> " : "";
                        $fileList.prepend( $("<span>").append( img + file.name ) );
                      }, this, file, $("#fileList"));
                      reader.readAsDataURL(file);
                    });
                }
                $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );  
            }
        });
    });

      $( function() {
        $( "#resizable" ).resizable({
            stop: function( event, ui ) {
                height = $("#resizable").height(); 
                width = $("#resizable").width(); 
                console.log("width=height="+ width +"=="+ height);
            } 
        });
      } );

      </script>
    </head>
    <body>
    <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    table {
        font-size: 1em;
    }
    .ui-draggable, .ui-droppable {
        background-position: top;
    }
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
      #resizable h3 { text-align: center; margin: 0; }
    </style> 

     <div id="droppable" class="ui-widget-content" style="width:300px; height: 300px;">
      <!--img src="imgs/pic.jpg" id="resizable"/-->
      <div id="fileList"></div>
      Drop file here.
    </div>
    <div id="start">Waiting for dragging the image get started...</div>
    <div id="stop">Waiting image getting dropped...</div>

    <div class="draggable" class="ui-widget-content">
      <p>Drag me around</p>
    </div>
     <div class="draggable" class="ui-widget-content" style="position: absolute; left: 285px; top: 267px;">
      <p>me, too</p>
    </div>
    <!--div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
    </div-->

    </body>
    </html>

是因为我动态上传图片吗？

您必须在

图像加载后和向 DOM 添加新的img元素后执行$( "#resizable" ).resizable();：

reader.onload = $.proxy(function (file, $fileList, event) {
    var img = file.type.match('image.*') ? "<img  id="resizable" src='" + event.target.result + "' /> " : "";
    $fileList.prepend($("<span>").append(img + file.name));
    $( "#resizable" ).resizable();
}, this, file, $("#fileList"));

检查我的小提琴是否有工作演示：https://jsfiddle.net/beaver71/g73p7skk/

相关内容

最新更新

热门标签：