Как сделать перетаскиваемый элемент с помощью JQuery?
Я пытаюсь сделать элемент перетаскиваемым с помощью JQuery Я попробовал это, но это не сработало, потому что скрипты не работают, и похоже, что ссылки нет. Вот мой код
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script type = "text/javascript" src = "js/jquery-1.3.2.min.js"></script>
<script type = "text/javascript" src = "js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id = "drag"></div>
</body>
</html>У меня нет файлов. Мне нужны ссылки на файлы типа webstie.com/filename
Ответы 2
Порядок в вашем коде играет важную роль во всем. Вам необходимо загружать ваши скрипты ПОСЛЕ загрузки DOM. Также - Тщательно просмотрите свой DevToolsF12 - Консоль дает важную информацию о том, что элементы DOM не найдены, не загружены и т. д..
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id = "drag"></div>
<script
src = "https://code.jquery.com/jquery-3.6.0.min.js"
integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4 = "
crossorigin = "anonymous"></script>
<script
src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity = "sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E = "
crossorigin = "anonymous"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
</body>
</html>похоже, что в вашей файловой системе не было файлов js/jquery-1.3.2.min.js и js/jquery-ui-1.7.1.custom.min.js. Я заменил файлы на CDN.
Найдите CDN здесь:
https://cdnjs.com/libraries/jqueryhttps://cdnjs.com/libraries/jqueryui
Это не обязательно должно быть написано после загрузки страницы. Но в некоторых случаях это может увеличить время начальной загрузки!
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity = "sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ= = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity = "sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA= = " crossorigin = "anonymous"></script></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id = "drag"></div>
</body>
</html>мне нужно включить "Integrity = " sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcO P + u1T9qYdvdihz0PPSii qn / + / 3e7Jo4EaG7TubfW= "кросс-скрипт" = "кросс-код" GUrorMQin = 2 "GUrorMQin"
Я лично не стал бы использовать JavaScript в <head> или выше DOM, если на то пошло. - Смотрите мой ответ .. СПРАВКА
@Zak Я обычно пишу свой jQuery на голову, чтобы можно было использовать isebit вне $(document).ready(). Файл будет кэширован при первой загрузке, и я надеюсь, что это не будет иметь большого значения.
Вы уверены, что у вас есть файлы
js/jquery-1.3.2.min.jsиjs/jquery-ui-1.7.1.custom.min.js"?