jQuery ui droppable 在 PartialView 中不起作用答案

【问题标题】：jQuery ui droppable not worked in PartialViewjQuery ui droppable 在 PartialView 中不起作用
【发布时间】：2016-12-13 08:44:54
【问题描述】：

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

代码： _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>
...

CreatePage.cshtml

        @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>
...

方法加载模板：

[HttpPost]
        public ActionResult LoadTemplate(string nameTemplate)
        {
            return PartialView("Template/" + nameTemplate);
        }

示例模板。文件 Template1.cshtml：

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

【问题讨论】：

标签： jquery asp.net asp.net-mvc jquery-ui partial-views

【解决方案1】：

将此javascript 添加到您的局部视图中

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

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

【讨论】：

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