jQuery Draggable Element ASP.NET MVC

Question

I've been looking through a lot of tutorials on jQuery draggable and trying to apply it to ASP.NET MVC, but I am really confused.

Does anyone know of some simpler samples.

@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")
    }

got nothing : smiply it displays the element alone.can't able to drag — Sirushti
– Sirushti, Commented Jul 26, 2014 at 7:05
add these files in ur head tag.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> — Kartikeya Khosla
– Kartikeya Khosla, Commented Jul 26, 2014 at 7:28

Kartikeya Khosla · Accepted Answer · 2014-07-26 07:54:52Z

1

You have one of these problems :-

Your jQuery or jQuery UI Javascript path files are wrong.
Your jQuery UI does not include draggable.
Your div is unstyled or empty, therefore there is nothing to drag.
Something is colliding with your jQuery or jQuery UI so it doesn't work.

In your question ur div with id="drag" in not styled so give style to it so that draggable will work on it.

edited Jul 26, 2014 at 7:54

answered Jul 26, 2014 at 7:37

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sirushti Over a year ago

Thank you very much Kartikeya Khosla : Now its working greatly. The problem is its not styled.

Pawan · Accepted Answer · 2014-07-26 07:39:30Z

0

ut your dragable elements inside Ul as below and don't forget to include Jquery UI files reference:

<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({       
  });     
});

Working Demo Is Here http://jsfiddle.net/booyaa/YvJhE/

edited Jul 26, 2014 at 7:39

answered Jul 26, 2014 at 7:08

Pawan

1,7401 gold badge16 silver badges37 bronze badges

2 Comments

Pawan Over a year ago

Plsase include JQuery Ui Reference code.jquery.com/ui/1.11.0/jquery-ui.js code.jquery.com/jquery-1.10.2.js

Sirushti Over a year ago

Thank u very much Pawan .Now its Working greatly:

Collectives™ on Stack Overflow

jQuery Draggable Element ASP.NET MVC

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related