Felix Felix - 1 month ago 6
CSS Question

How to highlight one image over other using jquery css?

currently i have some images in a div in which all images are draggable . Thes all images have z index 1 .

The thing is that these images are draggable , but the last image is
highlight more .

For example if 3 images then the order of highlight is 3rd image>2nd image> 1st image. But i need to change this .

If user click on 2nd image and he dragged it over third image
then 2nd image should be highlight . That the current dragging or clicking div should be over the other images .

How to do this ?

Please see my code .



$(function(){

$(".child").draggable({
containment: "#parent", });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent" style="z-index:1; min-height: 200px; background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg')">
<img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' style='position: absolute; z-index:1' class='child' />
<img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' style='position: absolute; z-index:1' class='child' />

<img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' style='position: absolute; z-index:1' class='child' />

</div>





this is the corresponding jsfiddle https://jsfiddle.net/felixtm/x3xb2jwf/2/

Answer

Try to to change your z index every time after you drag with start options

$( function() {
  var a = 1;
  $( ".child" ).draggable({
    containment: "#parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  });
});

see here live https://jsfiddle.net/x3xb2jwf/4/

Comments