CODEWITHSUNDEEP
javascriptjqueryfilereader
swam
swam

Reputation: 303

Unable to manipulate element using FileReader

I have included a jfiddle to look over. Basically what I am trying to accomplish is to allow a user to upload a picture and be able to move it around the page. When I use the Chrome debugger, I can see that it successfully updates the inline style with lines 27 and 28 of the jQuery but the image is not responding appropriately. Any ideas? Thanks in advance.

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);
        });
    });

Upvotes: 0

Views: 26

Answers (1)

Zamboney
Zamboney

Reputation: 2010

you need to add to the img#pic tag a css position: relative;

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

img#pic {
   position: relative;
}

Upvotes: 2

Related Questions