jQuery UI Draggable - how to prevent browser image dragging (to desktop)

Question

I'm at a loss here. I have a draggable app working very well that is based on jQuery UI draggable. Its doing everything I want it to. However, when I go to drag an image, the native browser function that allows me to drag and drop an image to my desktop or another browser tab always means that I have to click the image and drag it a bit, then let it go, and then click and drag again in order to get the draggable going. I know I've seen sites where I can drag an image without this happening.

Here is a brief video showing you what is happening - in the video, on the first click when the drag enabler turns green I grab and shake the image I am dragging all over. This is the browser behavior where I can drop this image on my desktop and also onto the tab bar to open it in a new tab. The second time I click the image it slides up and down, constrained to the vertical axis only, as defined in the function call.

I've tried just about everything on this page and others like it, and all of those things tend to disable any dragging of the image at all including how I want it to drag. I've also added div's around each image and nothing changes. Any ideas?

Here is my code:

//Accessories dragging
var $drag_contain = $('#current_build');
$(document).on('drag', '.drag', function(ev,dd) {
    $(this).draggable({
        disabled: false,
        axis: "y",
        stop: function(event, ui) {
            //when dragging is done, remove ability to drag
            $(this).css('z-index','5').removeClass('drag').draggable('disable');
        }
    });
});

and here is the HTML

  <div id="current_build">
<div class="10117" style="z-index:2;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/bas_18invhrcfootpedal.png" /></div>

<div class="10124" style="z-index:3;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/col_47_5inshortvhrc.png" /></div>

<div class="10356" style="z-index:1;top:0px;left:0px;"><img src=
"/assets/images/config_combos_sized/cas_4intwin_18invhrc.png" /></div>

<div class="10362" style="z-index:4;top:-27px;left:0px;"><img src=
"/assets/images/config_combos_sized/dm_dualmonitormount.png" /></div>

<div class="10374" style="z-index:5;top:34px;left:0px;"><img src=
"/assets/images/config_combos_sized/acc_dividedutilitybin.png" /></div>

Obviously I have div's around the images at this point.

Answer 1

Turns out I was calling draggle enable and disable a few too many times based on other interactions. A refactoring of my events fixed this up.

Answer 2

You could do

<div style="background: url('/assets/images/config_combos_sized/bas_18invhrcfootpedal.png') no-repeat;"></div>

Then you can drag it without worrying about the browser behavior.