如何重新調整和拖動從文件夾中選擇的圖像

我想重新調整大小並拖動用戶從文件夾中選擇的圖像。我可以單獨做。但是，當我從一個文件夾合併選擇圖像，然後調整大小並拖動它，我沒有工作。顯示所選圖像，但不可移動。我不知道該怎麼做。誰能告訴我？如何重新調整和拖動從文件夾中選擇的圖像

這是最後的代碼：

<html> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

</style> 


<body> 

    <input type='file' onchange="readURL(this);" /> 
    <img id="blah" src="#" alt="your image" /> 

</body> 


<style type="text/css"> 
#blah { 
width: 260px; 
height:300px; 
padding: 0; 
} 
#blah img { 
width: 100%; 
height: 100%; 
} 



</style> 

<script type="text/javascript"> 
$(function() { 
    $("#blah").resizable(); 
    $("#blah").draggable(); 

}); 
</script> 

<script> 
function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah') 
        .attr('src', e.target.result) 
        .width(150) 
        .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

</script> 
</head> 

</html>

下面是結果的截圖。即使圖像顯示，沒有選項調整大小（邊緣是不可移動的底部右邊緣） enter image description here

來源

2013-10-31 Arjun

似乎與jQueryUI的1.9.2在Chrome和FF的最新版本工作見http://jsfiddle.net/LyMes/1/ – jbl

檢查錯誤控制檯有可能是錯誤 – AmGates

@AmGates它不工作。我可以選擇圖像並顯示。但不能拖動或調整大小。哪個庫被替換;第一個腳本還是第二個？替換也沒有爲我工作 – Arjun

似乎與您正在鏈接的jquery.ui庫的問題。使用下面顯示的標籤

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>

希望這可以解決您的問題。

來源

2013-10-31 10:53:58 AmGates

如何重新調整和拖動從文件夾中選擇的圖像

回答

相關問題