MVC jQuery sorting images (Drag Drop)-CodePudding

in the view i have

<div >
    <ul  id="SortableGallery" style="cursor:move">
    
    </ul>
       
</div>

the for thee "SortableGallery" there is a function that adds the image on button press with this Ajax

for (var i = 0; i < files.length; i  ) {
$('<li ><div><img id="image_'   i   '" src="'   '/TempUPL_FLD/'   '@Model.ImageURL'   '/'   i   '.'   ext   '" /></div></li>').appendTo($("#SortableGallery"));
                                }

then the script

<script>
    $("#SortableGallery").sortable({

        update: function () {

            alert("Wow");
        }
    });
</script>

!(https://i.stack.imgur.com/wUUF7.png) i get the Cannot move image icon... ?

What am i doing wrong ?

CodePudding user response：

even if i do

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#SortableGallery").sortable({
            placeholder: "ui-state-highlight"
        });
        $("#SortableGallery").disableSelection();
    });
</script>

<div >
    <ul  id="SortableGallery" style="cursor:move; height:60px; background:red;">
        <li >1</li>
        <li >2</li>
        <li >3</li>
        <li >4</li>
        <li >5</li>
        <li >6</li>
        <li >7</li>
        <li >8</li>
        <li >9</li>
    </ul>
</div>

it still doesnt work, the list is correct but not movable ?

CodePudding user response：

okey, fixed it my jquery-ui was not loading propperyl

done a test

if (window.jQuery) {
        if (window.jQuery.ui) {
            alert("jqueryIO loaded");
        } else {
            alert("jquery-ui isn't loaded");
        }
    } else {
        alert("jquery is NOT loaded");
    }