無法使用FileReader操縱元素

Question

我已經包含一個jfiddle來查看。 基本上我試圖完成的是允許用戶上傳圖片並能夠在頁面上移動它。當我使用Chrome調試器時，可以看到它使用jQuery的第27行和第28行成功更新了內聯樣式，但圖像沒有正確響應。有任何想法嗎？提前致謝。

https://jsfiddle.net/swam/jxoagk86/

 $(document).ready(function(){ 
     $(function(){ 
      $("#file").change(function(){ 
       var reader = new FileReader(); 
       reader.onload = function(e){ 
        $('#pic').attr("style", "height:200; width: 300;"); 
        $('#pic').attr('src', e.target.result); 
       } 
       reader.readAsDataURL(this.files[0]); 
      }); 
     }); 
    }); 

    $(document).ready(function(){ 
     $("#pic").mousedown(function(){ 
      $(this).data("dragging", true); 
     }); 

     $("#pic").mouseup(function(){ 
      $(this).data("dragging", false); 
     }); 
     $("#pic").mousemove(function(e) { 
      if (!$(this).data("dragging")) 
       return; 
      $(this).css("left", e.clientX - $(this).width()/2); 
      $(this).css("top", e.clientY - $(this).height()/2); 
     }); 
    }); 

Answer 1

你需要添加到img#pic標籤的CSS position: relative;

https://jsfiddle.net/jxoagk86/1/

​​