我正在尝试制作一个模拟拼字游戏的程序,从而允许用户拖动瓷砖作品以说明点。但是,我对jQuery的"可拖动"功能有问题。我认为这可能与我如何导入jQuery有关,但是我正在努力寻找一种测试方法。
(也很抱歉,如果我的问题的格式关闭了。首次用户!)
index.html :
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>
<script type="js/draggable.js"></script>
<title>Scrabble - Nicholas W</title>
</head>
<!-- Some additional irrelevant code here -->
<body>
<div id=pieces class="draggable ui-widget-content">
<p>Piece1</p>
<p>Piece2</p>
<p>Piece3</p>
</div>
</body>
draggable.js
$( function() {
console.log("Trying to drag...")
$( ".draggable" ).draggable();
} );
您的JavaScript选择器没有在类下方选择P标签。另外,您正在选择一堂课,因此返回是一个数组,您需要在它们上进行.east()。查看摘要,现在正常工作
$(function() {
console.log("Trying to drag...");
$( ".draggable p" ).each(function(){
$(this).draggable();
});
} );
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=pieces class="draggable ui-widget-content">
<p>Piece1</p>
<p>Piece2</p>
<p>Piece3</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>
您要查找的确切功能可以在这里找到:https://jqueryui.com/draggable/#snap-to
查看捕捉到网格的最后两个框