Drag & Drop Images / Foto Dengan JQuery

Pada artikel ini kita akan membuat fitur drag dan drop image atau foto dari satu Div ke Div yang lain dengan bantuan JQuery yaitu menggunakan plugin JQuery UI Draggable dan Droppable.
 Berikut contoh pembuatannya,
1. Buatlah sintak HTML untuk menampilkan image seperti berikut

<div id="dvSource">

    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/9/98/Gn-0000.jpg" />

    <img alt="" src="http://vignette4.wikia.nocookie.net/gundam/images/f/f5/Ms-05a.jpg" />

    <img alt="" src="http://vignette2.wikia.nocookie.net/gundam/images/0/01/Agx-04.jpg" />

</div>

<hr />

<div id="dvDest">

    Drop here

</div>

Pada syntak diatas terdapat 2 Div dengan id "dvSource" dan "dvDest". dvSource digunakan untuk menampilkan image yang nanti image tersebut akan kita pindahkan ke dvDest.

2. Buatlah sintak CSS nya

<style type="text/css">

body

{

    font-family: Arial;

    font-size: 10pt;

}

img

{

    height: 100px;

    width: 100px;

    margin: 2px;

}

.draggable

{

    filter: alpha(opacity=60);

    opacity: 0.6;

}

.dropped

{

    position: static !important;

}

#dvSource, #dvDest

{

    border: 5px solid #ccc;

    padding: 5px;

    min-height: 100px;

    width: 430px;

}

</style>

3. Terakhir kita buat sintak Javascript / JQuery nya untuk menjalankan fitur drag dan dropnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>

<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet"

type="text/css" />

<script type="text/javascript">

$(function () {

    $("#dvSource img").draggable({

        revert: "invalid",

        refreshPositions: true,

        drag: function (event, ui) {

            ui.helper.addClass("draggable");

        },

        stop: function (event, ui) {

            ui.helper.removeClass("draggable");

            var image = this.src.split("/")[this.src.split("/").length - 1];

            if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {

                alert(image + " dropped.");

            }

            else {

                alert(image + " not dropped.");

            }

        }

    });

    $("#dvDest").droppable({

        drop: function (event, ui) {

            if ($("#dvDest img").length == 0) {

                $("#dvDest").html("");

            }

            ui.draggable.addClass("dropped");

            $("#dvDest").append(ui.draggable);

        }

    });

});

</script>

Untuk contohnya bisa dilihat di link  berikut