Can't get JQuery Draggable plugin to work?

问题

I'm very new to JQuery and I'm trying to create a sample page using the Draggable plugin. The page loads fine, but I'm not able to drag my <div> tag anywhere. I've been trying to copy this demo. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
         <style type="text/css">
                #draggable { width: 150px; height: 150px; padding: 0.5em;  border: solid 1px black; cursor:pointer;}
         </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>


            <script src="scripts/jquery.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.core.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.draggable.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.mouse.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.widget.js" type="text/javascript"/>
            <script src="scripts/jquery-ui-1.8.13.custom.js" type="text/javascript" />

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#draggable").draggable();
                });
            </script>


            <div class="demo" style="height: 500px; width: 500px;">
                <div id="draggable">
                    <p>Drag me around</p>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

I'm just trying to make it so I can drag my "draggable" <div> around in the "demo" <div> around it. Can anyone see what I'm missing?

回答1:

Have you included the jQuery UI script on your page? Here is CDN link to the latest versions.

I use the Html5Boilerplate best practice of:

    </form>

    <!-- Javascript at the bottom for fast page loading -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script>

    <!-- Grab Google CDN's jQuery UI, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript"> $.ui || document.write('<script src="js/libs/jquery-ui-1.8.12.custom.min.js">\x3C/script>')</script>

    <!-- Scripts concatenated -->
    <script src="js/plugins.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <!-- End scripts -->

</body>

回答2:

For what it's worth, here is my code that I was able to get working. I only needed to include 2 javascript files (one of which I was already including, and the other, jquery-ui.js, came from here, thanks to @Scott!). Also, @DarthJDG was correct, the order DOES matter. If I switch the order of the two script tags, the page breaks. I've only included the tag as everything else remained the same. Thanks again everyone for pointing me in the right direction for this. Here is my code:

<body>
    <form id="form1" runat="server">
        <div>

            <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%> 
            <script src="scripts/jquery.js" type="text/javascript"></script>

            <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
            <script src="scripts/jquery-ui.js" type="text/javascript" ></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#draggable").draggable({ containment: 'parent' });
                });
            </script>


            <div class="demo" style="height: 500px; width: 500px;">
                <div id="draggable">
                    <p>Drag me around</p>
                </div>
            </div>
        </div>
    </form>
</body>

回答3:

DownLoad Complete JueryUI package from http://jqueryui.com/download which should include wizard.js,core.js,mouse.js and draggable.js and then use $(control).draggable() to make it work.

来源：https://stackoverflow.com/questions/6144188/cant-get-jquery-draggable-plugin-to-work

标签

jquery

jquery-ui

drag-and-drop

draggable

jquery-ui-draggable