Невозможно управлять элементом с помощью FileReader

Question

Я включил jfiddle для просмотра. В основном, что я пытаюсь сделать, это разрешить пользователю загружать картинку и перемещать ее по странице. Когда я использую отладчик Chrome, я вижу, что он успешно обновляет встроенный стиль строк 27 и 28 jQuery, но изображение не отвечает соответствующим образом. Есть идеи? Заранее спасибо.

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 тега КАС position: relative;

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

img#pic { 
    position: relative; 
}