初学者到JQuery，“可拖动”不拖动
[英]Beginner to JQuery, “Draggable” not dragging
问题描述
I am trying to make a program which simulates Scrabble, allowing the user to drag tile pieces to make words for points. 
我正在尝试制作一个模拟Scrabble的程序，允许用户拖动图块来制作要点的单词。 However, I am having an issue with the JQuery 'Draggable' function. 但是，我在使用JQuery的“可拖动”功能时遇到问题。 I'm thinking it might have to do with how I'm importing the JQuery, but I'm struggling to find a way to test it. 我认为这可能与我导入JQuery的方式有关，但我一直在努力寻找一种测试方法。
(Also, apologies if the formatting for my question is off. First-time user!) （此外，如果我的问题的格式已关闭，我们深表歉意。首次用户！）
index.html : 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 draggable.js
$( function() {
console.log("Trying to drag...")
$( ".draggable" ).draggable();
} );
2 个解决方案
解决方案1
0 2018-12-18 03:12:59
The exact functionality you are looking for can be found here: https://jqueryui.com/draggable/#snap-to 您正在寻找的确切功能可以在这里找到： https : //jqueryui.com/draggable/#snap-to
Check out the last 2 boxes that snap to a grid 签出捕捉到网格的最后两个框
解决方案2
0 已采纳 2018-12-18 03:15:03
Your javascript selector was not picking the P tag below the class. 您的javascript选择器未选择课程下方的P标签。 Also you are selecting a class, so the return is an array and you need to .each() over them. 另外，您正在选择一个类，因此返回的是数组，您需要对它们进行.each（）。 See the snippet, now working 查看代码段，现在可以使用了
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.