初学者到JQuery,"Draggable"不拖拽



我正在尝试制作一个模拟拼字游戏的程序,从而允许用户拖动瓷砖作品以说明点。但是,我对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

查看捕捉到网格的最后两个框

最新更新