How to fade an image in and out while dragging a div?

Question

I have multiple draggable items and one droppable area. In this droppable area I placed an image. While dragging one of the elements I want this image to fadeIn and out when it's reversed.

I accompished this, but I'm doubting this is the cleanest/ best way to do this.

HTML

<div id="divwrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
<div id="droparea">
    <div id="imagetoshow"></div>
</div>

JS

$("#div1").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div2").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div3").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div4").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

JSFIDDLE

Is it possible to make one function thats being called for each draggable? Or should I make a function for the droppable div? Thank you in advance.

Answer 1

You can reduce your js like this

$("#div1,#div2,#div3,#div4").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

Or you can use classes instead of id in your div and call this class in the js