CODEWITHSUNDEEP
javascripthtmljquerydrag-and-drop
SMO
SMO

Reputation: 33

Drag image from browser to Desktop

I want to drag image from browser to Desktop.

I have for example an image with src is a miniature (small picture) and the name is the big image.

When I drag the image from browser to desktop, the small image will be dragged and not the big image.

So how can I drag the big picture ? How can I do that by jQuery or JS ?

<img src="http://2.bp.blogspot.com/-iUJHpIju24o/UlQA-x8J7qI/AAAAAAAANVI/clUJZjFsm18/s640/plant_1280.jpg" name= "https://live.staticflickr.com/6120/6246147468_e5190345a5_h.jpg" >

Can you help me please ?

Upvotes: 1

Views: 541

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

You can achieve this by using a little tricky code , using mouseover and mouseout

On mouseover

  • , set original height and wight as style to the image (to preserve thum image hieght witdh ) ,

  • then store thmb url in data attribute , and replace src of image by the hd url in name attribute

after mouseout (mouse leave the image ) ,

  • remove the style attribute (no nedd height and width )

  • restore thumb original url to the image src attribute

Now if you check drag en drop , it will store the hd image instead of thmbs image ::

See below working snippet :

$("#img").mouseover(function(e) {

  // store thumb url in data attribute in order to get it after mouseout
  $(this).data("url", $(this).attr("src"));
  

  // set height , width of orignal thumb for use experience 
  $(this).css({
    "width": $(this).width(),
    "height": $(this).height()
  })
  
  // change url src to hd image
  $(this).attr("src", $(this).attr("name"));

});

$("#img").mouseout(function(e) {
  // restore original thumb image
  $(this).attr("src", $(this).data("url"));

  // remove style added on hover 
  $(this).removeAttr("style");

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img" src="http://2.bp.blogspot.com/-iUJHpIju24o/UlQA-x8J7qI/AAAAAAAANVI/clUJZjFsm18/s640/plant_1280.jpg" name="https://live.staticflickr.com/6120/6246147468_e5190345a5_h.jpg">

Upvotes: 1

Related Questions