拖动和排序部分视图

Question

我正在尝试在我的应用程序中添加拖放和可排序功能。我想要做的是添加按钮单击的部分视图，然后尝试移动它。这是我想要做的事情的例子

https://jqueryui.com/draggable/#sortable

没有正确排序。当我使用ul或li而不是div标签时，它会添加新的局部视图并导致一些奇怪的行为。我不确定我错过了什么。在此先感谢您的帮助

Partial View:

<div class="action-item" id="@ViewBag.DivActionID" style="background-color:#EBF3F8;  padding:10px;">
        <div>
            <img src="~/Images/Move.png" alt="Move" class="editbtn moveaction" />
        </div>

        <div>
                <p>Currently showing actions for @ViewBag.DivActionID</p>
        </div>
</div>

<script>
    jQuery(document).ready(function ($) {
        $(document).on('click', '.moveaction', function (e) {

            $("#actions").sortable({
                revert: true
            });

            $(this).closest(".action-item").draggable({
                connectToSortable: "#sortable",
                helper: "clone",
                revert: "invalid"
            });

            $("ul, li").disableSelection();
        });

        });
</script>

Controller Code:

public ActionResult CreateNewActions(string actionid)
{
    ViewBag.DivActionID = actionid;
    return PartialView("~/Views/Interp/_AddActions.cshtml");
}

Main View:

<div>
     <div id="actions"></div>
</div>

<script type="text/javascript">
    var actionidcounter = 0;

    $("#btn_addactions").on('click', function () {                    
        actionid = "ActionID" + actionidcounter;

        $.ajax({
            async: false,
            data: { 'actionid': actionid },
            url: '/Home/CreateNewActions'
        }).success(function (partialView) {            
            actionidcounter++;                
            $('#actions').append(partialView);
        });
    });
</script>