Не можете заставить работать плагин JQuery Draggable? - PullRequest
Новая
       46

Не можете заставить работать плагин JQuery Draggable?

2 голосов
/ 26 мая 2011

Я очень плохо знаком с JQuery и пытаюсь создать образец страницы с помощью плагина Draggable.Страница загружается нормально, но я нигде не могу перетащить свой тег <div>.Я пытался скопировать это демо .Вот мой код: 

<!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>

Я просто пытаюсь сделать это, чтобы я мог перетащить свой "перетаскиваемый" <div> в "демо" <div> вокруг него.Кто-нибудь может увидеть, что мне не хватает?

Ответы [ 3 ]

3 голосов
/ 26 мая 2011

Вы включили скрипт JQuery UI на своей странице? Вот ссылка CDN на последние версии.

Я использую Html5Boilerplate рекомендацию: 

    </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>
0 голосов
/ 19 июля 2012

DownLoad Полный пакет JueryUI из http://jqueryui.com/download, который должен включать wizard.js, core.js, mouse.js и draggable.js, а затем использовать $ (control) .draggable () для его работы.

0 голосов
/ 27 мая 2011

Для чего это стоит, вот мой код, который я смог получить работать.Мне нужно было только включить 2 файла javascript (один из которых я уже включал, а другой, jquery-ui.js, пришел из здесь , благодаря @Scott!).Кроме того, @DarthJDG был верным, порядок DOES имеет значение.Если я поменяю порядок двух тегов скрипта, страница разрывается.Я включил только тег, так как все остальное осталось прежним.Еще раз спасибо всем, что указали мне правильное направление для этого.Вот мой код: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...