JQuery UI перетаскивания div не работает

1

Я пытаюсь получить div, который можно draggable в оболочку другого div.

Я использую jQuery UI для этого, но не могу заставить его работать.

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script>
$(".example").draggable({
  containment: ".box"
});
</script>
<div class="box" style="border: solid 1px black; width:500px; height:500px;">
  <div class="example" style="border: solid 1px black; width:90px; height:90px;">Drag me</div>
</div>

Я использую bootstrap, есть ли другие загружаемые файлы, которые могут вызвать это?

Теги:

3 ответа

0

Функция draggable не вызывается. Поместите его в раздел заголовка вашей разметки, как в примере jQuery Ui. Также вы должны проверить свою Javascript-консоль на наличие возможных ошибок - там вы увидите, правильно ли загружен ваш jquery или нет.

$(".example").draggable({ containment: ".box" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="box" style="border: solid 1px black; width:500px; height:500px;">
  <div class="example" style="border: solid 1px black; width:90px; height:90px;">Drag me</div>
</div>
Поделиться
  • 0
    консоль показывает, что draggable не является функцией "Uncaught TypeError: $ (...). draggable не является функцией"
  • 0
    Тогда ваш файл jQuery UI не загружен ... проверьте правильный путь и орфографию. Вы можете использовать <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> вместо локального файла и посмотреть, работает ли он.
Показать ещё 5 комментариев
0

Вам нужно обернуть функцию draggable() внутри $(document).ready():

$(document).ready(function () {
    $(".example").draggable({ containment: ".box" });
});

Вы можете проверить, было ли применено draggable(), щелкнув правой кнопкой мыши, чтобы проверить элемент, и посмотреть, есть ли какой-либо класс, такой как ui-draggable или ui-draggable-handle. Если это так, это сработало.

Кроме того, убедитесь, что вы действительно загружаете библиотеки jQuery, которые вам нужны. Вы можете получить последние версии:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Поделиться
  • 0
    Просто убедитесь, что путь для ссылок JS правильный "js / jquery-3.1.1.min.js", решение выше должно работать нормально. Если путь указан неверно, вы получите сообщение об ошибке GET в журналах консоли. Предпочитаю использовать CDN, как предложил ответ Андреаса, это будет полезно на этапе развертывания приложения.
0

Попробуй это:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Containment drag functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".example" ).draggable({ containment: ".box" });
  } );
  </script>
</head>
<body>

<div class="box" style="border: solid 1px black; width:500px; height:500px;">
<div class="example" style="border: solid 1px black; width:90px; height:90px;">Drag me</div>
</div> 
</body>
</html>
Поделиться
  • 0
    Этот код работает автономно, но когда я внедряю его в свою веб-страницу, я все еще вижу проблему. Я использую загрузчик, есть ли другие загружаемые файлы, которые могут быть причиной этого?
  • 0
    убедитесь, что вы действительно загружаете необходимые библиотеки jQuery. загрузите следующие библиотеки в свою веб-страницу, вставив их в раздел <head> . <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню