Photos are lined up inside UL.
Inside each LI there is A which is marked absolute by CSS and pops out on hover.
When I accidentally move mouse during click on download icon, drag starts and image is moved although I tried to make it not draggable.

The question: is there a way to make download icon not draggable?

So far I tried with HTML attribute draggable set to false and CSS user-drag:none; with no luck at all.

<ul class="Photos PhotoUploadByDragDrop ui-sortable">
    <li class="Photo Photo67997" ondblclick="Admin.Photo.openPhoto( '/img/ba9389f2-8cce-4b72-88b9-6e2451913e61/original' );" style="position: relative; opacity: 1; left: 0px; top: 0px;">
        <input type="hidden" name="Photo" value="67997">
        <img src="/img/ba9389f2-8cce-4b72-88b9-6e2451913e61/small">
        <span>Glavna</span>
        <a draggable="false" class="Dl" href="/img/ba9389f2-8cce-4b72-88b9-6e2451913e61/original/download"></a>
    </li>
    <li class="Photo Photo67998" ondblclick="Admin.Photo.openPhoto( '/img/e9613d8c-b005-414c-9106-d2f6df07522b/original' );" style="position: relative; opacity: 1; left: 0px; top: 0px;">
        <input type="hidden" name="Photo" value="67998">
        <img src="/img/e9613d8c-b005-414c-9106-d2f6df07522b/small">
        <span>Dodatna</span>
        <a draggable="false" class="Dl" href="/img/e9613d8c-b005-414c-9106-d2f6df07522b/original/download"></a>
    </li>
</ul>

ul.PhotoUploadByDragDrop > li.Photo > a.Dl { 
    user-drag:none; 
    position:absolute; 
    display:block; 
    right:-6px; top:-6px; 
    width:40px; 
    height:40px;    
    opacity:0.0; 
    transition:opacity .5s ease-in-out; 
    -moz-transition:opacity .5s ease-in-out; 
    -webkit-transition:opacity .5s ease-in-out; 
    background-size:40px 40px; 
    background-repeat:no-repeat; 
    background-position:center center; 
    background-image:url("data:image/svg+xml;utf8,<svg .....></svg>"); 
}