Drag and Drop jquery ui

Drag from one ul to another ul and initiaze again dragdrop event

HTML

<ul id="list1" class="lists"></ul>
<ul id="list2" class="lists"></ul>

CSS

.lists {
    height: 200px;
    width: 300px;
    border: 1px solid #000000;
}

h3{
  font-size: 50px;
}

JavaScript

$(document).ready(function () {
    addElements();
    // there's the gallery and the trash
    var $gallery = $("#list1"),
        $trash = $("#list2");

    // let the gallery items be draggable
    $("li", $gallery).draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#list1 > li",
        drop: function (event, ui) {
            $("#list2").append('<h3>Image</h3> <p>Drop image here</p>');
            addElements();
        }
    });
});

function addElements() {
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>" +
        "<li id='item2' class='list1Items'>Item 2</li>" +
        "<li id='item3' class='list1Items'>Item 3</li>");
    //$( "#list1 > li" ).draggable();
    $("#list1 > li").draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    $("#list2").droppable({
        accept: "#list1 > li",
        drop: function (event, ui) {
            $("#list2").append('<h3>Image</h3> <p>Drop image here</p>');
            addElements();
        }
    });
}