How to set width and height to draggable image?

Question

function login_callback() {
    //alert("You are successfully logged in! Access Token: "+instaAccessToken);
    var url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token='+instaAccessToken;
    $.get( url, function( data ) {
        $.each(data.data, function(i, item) {
            var thumb = item.images.low_resolution.url;
            var image = item.images.standard_resolution.url;
            var str = '<div class="col-xs-6"><img data-src="'+image+'" src="'+thumb+'" class="thumbnail drag-image"/></div>';
            $('#instafeed').append(str);
            $('.drag-image').draggable({
                helper: 'clone',
                appendTo: 'body',
                containment: 'document',////
                refreshPositions: true,
                stop: function(event,ui) {
            },
            drag: function( event, ui ) {
                handleDrag(event,ui);            
            }

            });
        });
    },'jsonp');

}

This is my jquery function to the drag image to the canvas. But when dragging the image it shows as its original image size. How to define image size when dragging to the canvas.

Answer 1

                start: function(event,ui) {
                $(this).css({ height: 100, width: 100 });
                },

                stop: function(event,ui) {
                $(this).css({ height: 100, width: 100 });
                },

You can try with above code. Otherwise simply you can set image size on your css file for .drag-image class.