jQuery ui可拖放在PartialView中不起作用_Jquery_Asp.net_Asp.net Mvc_Jquery Ui_Partial Views

jQuery ui可拖放在PartialView中不起作用

jquery asp.net asp.net-mvc jquery-ui

jQuery ui可拖放在PartialView中不起作用,jquery,asp.net,asp.net-mvc,jquery-ui,partial-views,Jquery,Asp.net,Asp.net Mvc,Jquery Ui,Partial Views,请帮帮我。我想在我的项目中使用拖放功能，但在PartialView中无法使用可拖放功能代码： _LayoutCreatePage.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">

请帮帮我。我想在我的项目中使用拖放功能，但在PartialView中无法使用可拖放功能

代码： _LayoutCreatePage.cshtml

<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Styles.Render("~/Content/Flags/css/flag-icon.min.css")
        @Styles.Render("~/Content/Flags/assets/docs.css")

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jquery-ui")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("Scripts", required: false)
        <script>
            $(function () {
                $('#draggable').draggable();

                $('#droppable').droppable({
                    drop: function () {
                        alert('+');
                    },
                });
            });
        </script>
    </head>
...

        @model SiteBuilder.Models.Page

        @{
            ViewBag.Title = "CreatePage";
            Layout = "~/Views/Shared/_LayoutCreatePage.cshtml";
        }

            <script>
                function loadTemplate(e) {
                    $.ajax({
                        type: 'POST',
                        url: "/SiteBuilder/LoadTemplate",
                        data: { nameTemplate: e.id },
                        success: function (data) {
                            $("#layout").empty();
                            $("#layout").html(data);
                            $("#layout").find("div").attr('id', 'droppable');
                        }
                    });
                }
            </script>
    ...

<h4 class="text-center" id="droppable">Type layout:</h4>
<button id="template1" onclick="loadTemplate(this)">1</button>
<button id="template2" onclick="loadTemplate(this)">1</button>
<button id="template3" onclick="loadTemplate(this)">1</button>

<h4 class="text-center">Add content:</h4>
<h1 id="draggable">Image</h1>

<div id="layout"></div>
...

示例模板。文件Template1.cshtml:

<div class="containerBlocks">
    <div class="elements">
        <div class="smallBlock"></div>
        <div class="smallBlock"></div>
    </div>
</div>
<div class="bigBlock"></div>

将此

javascript

添加到局部视图

<script>
        $(function () {
            $('#draggable').draggable();

            $('#droppable').droppable({
                drop: function () {
                    alert('+');
                },
            });
        });
    </script>


$（函数（）{
$（'#draggable'）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（）{
警惕（+）；
},
});
});

将此

javascript

添加到局部视图

<script>
        $(function () {
            $('#draggable').draggable();

            $('#droppable').droppable({
                drop: function () {
                    alert('+');
                },
            });
        });
    </script>


$（函数（）{
$（'#draggable'）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（）{
警惕（+）；
},
});
});

很抱歉，请尝试在部分视图的开头添加jqery src抱歉，请尝试在部分视图的开头添加jqery src