Question

我正在尝试制作一个模拟Scrabble的程序，允许用户拖动图块来制作要点的单词。但是，我在使用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();
} );

Answer 1

您正在寻找的确切功能可以在这里找到：https://jqueryui.com/draggable/#snap-to

查看最后两个与网格对齐的框

Answer 2

您的javascript选择器未选择课程下方的P标签。另外，您正在选择一个类，因此返回的是数组，您需要对它们进行.each（）。查看正在运行的代码段

$(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>

初学者到JQuery，“可拖动”不拖动

2 个答案: