0

Hello guys i found this amazing drag and drop and resize image and i am trying to add a custom modification. I added an upload button so user can upload a photo.

i added the function bellow to find the last img id, create a new one and replace the latest id and img source. The user's photo uploading well but it's not draggable and resizable like other objects.

Official projects link is: http://tympanus.net/Tutorials/ImageVampUp/

The code that i added is:

<script>
$(document).ready(function() {

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var reader = new FileReader();
        reader.onloadend = function() {
        var newoid = parseInt($("#objects .obj_item:last img").attr("ID").split("_")[1], 10) + 1;
        var newoimage = reader.result;  
        $("#objects").append("<div class='obj_item' style='width:80px; height:80px; float:left; margin-left:5px; margin-top:5px;'><img id='"+newoid+"' width='80' height='80' class='ui-widget-content' src='"+newoimage+"' alt='el'/></div>");
        //$('#obj_25').attr('src', reader.result);

        }
        reader.readAsDataURL(file);        
        }
});

});
</script>

and inside projects left bar i added a div with an input so user can load the pic:

<input type='file' onchange="readURL(this);" />
Irene T.
  • 1,393
  • 2
  • 20
  • 40

1 Answers1

1

Just invoke the following putting it in a function after the image is appended:

$('#objects img:last').resizable({
   /* only diagonal (south east) */
   handles  : 'se',
   stop : resizestop 
}).parent('.ui-wrapper').draggable({
    revert  : 'invalid'
});
T J
  • 42,762
  • 13
  • 83
  • 138
ArinCool
  • 1,720
  • 1
  • 13
  • 24
  • i puted your code after: $("#objects").append("
    el
    "); but it didn't work!! :-(     – Irene T. Nov 27 '14 at 20:34
  • @IreneT. Please don't dump code blocks in comments, especially large unformatted blocks. Nobody will actually care enough to read it. Instead, edit your question and update it with the extra information... – T J Nov 28 '14 at 16:04
  • @ArinCool yes i will make a working fiddle and update my post – Irene T. Nov 28 '14 at 23:16