jQuery Пользовательский интерфейс не работает должным образом на моей веб-странице - PullRequest
Новая
       30

jQuery Пользовательский интерфейс не работает должным образом на моей веб-странице

0 голосов
/ 12 февраля 2020

Так что я только начал изучать jQuery онлайн-курс для веб-разработчиков, и я начал использовать jQuery пользовательский интерфейс, но когда я выполнил шаги по настройке его в видео, он не работает. Я попытался вставить перетаскиваемый текст в мой текстовый редактор, и он даже не всплыл. Я попытался изменить каталог ссылок, чтобы добавить что-то вроде перетаскиваемого, и я попытался возиться с небольшими ошибками, которые я мог бы сделать с моим кодом, и, похоже, ничего не работает. Я не уверен, что я делаю не так, любая помощь будет очень полезна, чтобы помочь мне выяснить, что не так. Это код для моей веб-страницы: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="jquery-ui/jquery-ui.css">

    <script src="jquery-ui/jquery-ui.js"></script>

</head>
<body>

<script type="text/javascript">

    $("#draggable").draggable();

</script>

</body>
</html>

1 Ответ

0 голосов
/ 13 февраля 2020

Поскольку вы используете CDN для самого jQuery, вы можете попробовать сделать то же самое с jQueryUI и его стилями. Это, по крайней мере, устранит одну возможную причину путаницы.

Заменить: 

<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
<script src="jquery-ui/jquery-ui.js"></script>

На: 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">

Вы можете изменить href таблицы стилей с одним из темы на странице jQuery загрузки пользовательского интерфейса: https://code.jquery.com/ui/

Затем вам нужно добавить перетаскиваемый контент и добавить draggable() на странице, готовой, поместив его в jQuery 's $();. 

<html lang="en">
<head>

  ...

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

</head>
<body>

  <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
  </div>


</body>
</html>

Для получения дополнительной информации см .: https://jqueryui.com/draggable/

...