Drag and drop from my system or other windows in jquery

Question

Hi am newbie to JQuery.

I am using drag and drop plugins in my website.

Code:

$(".imageDrop").droppable({
    scope:'preLast',
    drop: function(event, ui){
            $(this).prepend($("<div class='imgdiv'><img src='"+$(ui.helper).attr("src")+"' class='imageUpload' /></div>"));
            $(this).css("background","#fff");
          },
    over:function(event, ui){
            $(this).css("background","#c7e6ed");
          },
    out:function(event, ui){
            $(this).css("background","#fff");
          }
});

This code is working fine between drag and drop in same window or same page.

Now i want to add functionality for drag and drop from my system and other window or browsers. I had referred the link:

HTML5 drag and drop between windows but my problem is not solved.

The following way I just tried but I couldn't drag the old drop-able method.

$(".imageattachNow").bind('drop', function (e) {
    var file = e.originalEvent.target.files ||  e.originalEvent.dataTransfer.files;
});
$(".imageattachNow").bind('drop dragover', function (e) {
    e.preventDefault();
});

For this two methods i need to use to get the file as file and Object. I need to do both ways need to work the drag and drop functionality:

1. same page droppable
2. From my system or other window or other browsers

I need support the old drag and drop functionality and other windows or from my system functionality.

I don't know how to solve this problem. In file[0] how to send the image details for upload?