无法使用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/

​​