Question

我一直在浏览很多关于jQuery draggable的教程并试图将它应用到ASP.NET MVC，但我真的很困惑。

有没有人知道一些更简单的样本。

@model locat.Models.LoginModel

@{

    ViewBag.Title = "Log in";
}


    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "msform" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        <!-- fieldsets -->
    <div id="drag">
        <fieldset>
            <h2 class="fs-title">Login</h2>
            <h3 class="fs-subtitle"></h3>

            <input name="UserName" type="text" placeholder="Username">
            <input name="Password" type="Password" placeholder="Password">
            <input type="button" name="next" class="next action-button" value="New User" />

            <input type="submit" name="next" class="nexts action-login" value="Log in" />
        </fieldset>

    </div>
    }

<script>
    $(function () {
        $("#drag").draggable();
    });
</script>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")
    }

Answer 1

您遇到以下问题之一： -

您的jQuery或jQuery UI Javascript路径文件错误。
您的jQuery UI不包含draggable。
你的div没有样式或空，所以没有什么可以拖的。
有些东西正在与你的jQuery或jQuery UI发生冲突，所以它没有工作

在您的问题中，您的div为id =＆＃34;拖动＆＃34;没有样式，所以给它样式，以便draggable将工作。

Answer 2

在Ul中创建可拖动元素，如下所示，不要忘记包含Jquery UI文件参考：

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
 <li class="ui-state-default">Item 5</li>
</ul>

AND Jquery：

$(function() {
  $( "#sortable" ).draggable({       
  });     
});

工作演示在这里 http://jsfiddle.net/booyaa/YvJhE/

jQuery可拖动元素ASP.NET MVC

2 个答案: