onclick Tag not working with custom sorting function enabled

Viewed 64

I have a gallery with images, these images can be dragged to another place and also dragged back. When dragging them back, a sort function places them at the correct place again (order of ID).

now since I made this function, my onClick Tag function for the Image tag doesn't work anymore can someone explain me why this is and how I can solve this?

HTML (Razor):

<ul class="gallery col-md-8 borderBoxes" id="gallery">
        @for (int i = 0; i < Model.PageList.Count; i++)
        {
            <li class="imageListItem ui-icon-zoomin" id="@Model.PageList[i].ID">
                <figure id="@(i+1)">
                    <img class="pages small" src="data:image/jpeg;base64,@Model.PageList[i].ImageBaase64" onclick="imageLarger(this)" />
                </figure>
            </li>

        }
    </ul>

OnClickFunction (JS):

function imageLarger(image) {
    if ($(image).width() === 700) {
        $(image).width(100);
        setTimeout(function () {
            $(image).removeClass("largePages");
            $("li", $("#gallery")).draggable("option", "disabled", false);
        }, 300);

    } else {
        $("li", $("#gallery")).draggable("option", "disabled", true);
        $(image).width(700);
        $(image).addClass("largePages");
    }
};

SortFunction (JS):

 function sortByImageID() {
    var gallery = document.getElementById("gallery");
    var galleryItems = gallery.getElementsByClassName("imageListItem");
    for (var i = 0; i < galleryItems.length; i++) {

        var listitems = [];
        for (i = 0; i < galleryItems.length; i++) {
            listitems.push(galleryItems.item(i));
        }
        listitems.sort(function (a, b) {
            var compA = a.getElementsByTagName("figure")[0].getAttribute('id');
            var compB = b.getElementsByTagName("figure")[0].getAttribute('id');
            return (parseInt(compA) < parseInt(compB)) ? -1 : (parseInt(compA) > parseInt(compB)) ? 1 : 0;
        });
        for (i = 0; i < listitems.length; i++) {
            gallery.appendChild(listitems[i]);
        }
    }
}
0 Answers
Related