Question

如何在页面上创建可调整大小和可定位的拖放图像

我尝试从这里调整拖放功能：

dragging and dropping images into a Web page and automatically resizing them with HTML File API

jquery插件可拖动和可调整大小。

然而拖放功能停止工作。

有人可以帮忙吗？我真的很感激任何想法

<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-    ui.css"> 
<style>
#resizable { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#resizable.hover { border: 10px dashed #333; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<script>

$( function() {
$( "#resizable" ).resizable();
   } );
$( function() {
$( "#resizable" ).draggable();
   } );

   var holder = document.getElementById('holder'),
     state = document.getElementById('status');

 if (typeof window.FileReader === 'undefined') {
   state.className = 'fail';
 } else {
  state.className = 'success';
   state.innerHTML = 'File API & FileReader available';
     }

 holder.ondragover = function () { this.className = 'hover'; return false; };
 holder.ondragend = function () { this.className = ''; return false; };
 holder.ondrop = function (e) {
   this.className = '';
   e.stopPropagation();
   e.preventDefault();

   var file = e.dataTransfer.files[0],
       reader = new FileReader();
   reader.onload = function (event) {
     var img = new Image();
     img.src = event.target.result;
     // note: no onload required since we've got the dataurl...I think! :)
     if (img.width > 300) { // holder width
       img.width = 300;
   }
   holder.innerHTML = '';
   holder.appendChild(img);
   };
   reader.readAsDataURL(file);

   return false;
 };
   </script>
 </head>
 <body>

 <div id="resizable" class="ui-widget-content">
   <h3 class="ui-widget-header">Resizable</h3>
 </div>


      </body>
           </html>

拖放功能与可调整大小和可拖动的jquery函数一起不起作用

0 个答案: