我正在尝试将JQuery功能添加到我的Rails应用程序中;但它没有用。我正在使用JQuery draggable在屏幕上移动图像。我有一个独立的html文件，但我很难将它添加到我的Rails应用程序。这是独立文件：
<!DOCTYPE html>
<html>
<head>
<title>City</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui-1.10.4/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
<style type="text/css">
h1, h3
{
text-align: center;
margin: 0px;
}
/* style the list to maximize the droppable hitarea */
#canvas
{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0px auto;
overflow: hidden;
}
/*#canvas ol { margin: 0; padding: 1em 0 1em 3em; }*/
/*li { list-style: none;}*/
.canvas-area
{
width: 600px;
height: 600px;
}
/* map background */
/* img {
position: relative;
left: 50%;
top: 50%;
}*/
/* draggable icons */
.draggable
{
background: transparent url('images/transparent.png') repeat center top;
width: 40px;
height: 40px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
border: hidden;
/*position: absolute;*/
}
#draggable
{
width: 40px;
height: 40px;
}
div img
{
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
}
.arrow img
{
width: 200px;
height: 200px;
}
.arrow
{
width: 200px;
height: 200px;
border: 1px solid black;
}
.commercial100 img
{
width: 100px;
height: 100px;
}
.commercial100
{
width: 100px;
height: 100px;
}
#building img
{
height: 150px;
}
</style>
<script>
// jquery ui script for snapping to grid
$(function() {
$( ".draggable" ).draggable({ grid: [10,10] });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ], snap: true });
});
</script>
</head>
<body>
<div class="content">
<!-- Canvas for building the city -->
<h1>Mock view of my city</h1>
<h3>600 x 600</h3>
<div id="canvas">
<div id="ignoreThis" class="ui-widget-content canvas-area">
<p class="placeholder">Add your items here</p>
<div id="arrowSvg" class="draggable ui-widget-content arrow">
<img src="images/arrow.svg" alt="house" type="image/svg+xml" /> SVG (200px x 200px)
</div>
<div id="arrowPng" class="draggable ui-widget-content arrow">
<img src="images/arrow.png" alt="house"> PNG (200px x 200px)
</div>
<div id="building" class="draggable ui-widget-content commercial100">
<img src="images/building.png" alt="building" />
</div>
<div id="factory" class="draggable ui-widget-content commercial100" >
<img src="images/factory.png" alt="factory" />
</div>
<div id="ferry" class="draggable ui-widget-content commercial100" >
<img src="images/ferry.png" alt="ferry" />
</div>
<div id="house2l" class="draggable ui-widget-content" >
<img src="images/house2l.png" alt="two level house" />
</div>
<div id="houseSvg" class="draggable ui-widget-content">
<img src="images/house.svg" alt="house" type="image/svg+xml" /> SVG
</div>
<div id="housePng" class="draggable ui-widget-content">
<img src="images/house.png" alt="house" />
</div>
<div id="houseSF" class="draggable ui-widget-content" >
<img src="images/housesf.png" alt="SF house" />
</div>
<div id="street1" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street2" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street3" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street4" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
</div>
<script>
// code to make the active div move to the front
// code from http://www.codingforums.com/javascript-programming/260289-bring-div-element-front-click.html
// create an array to hold the (buildings, streets, landmarks) element's id
var ids=[],
// grab all the divs (each icon) and put it into thedivs
thedivs = document.getElementById("canvas").getElementsByTagName("div");
for (var i = 0; i < thedivs.length; i++) {
// add the id of each div to the ids array
//alert(thedivs[i].id);
ids.push(thedivs[i].id);
thedivs[i].onclick = function() {
for (var a = 0; a < ids.length; a++) {
if (this.id == ids[a]) {
// take current id that matches the selected id and move it to the end
ids.push(ids.splice(a,1));
}
document.getElementById(ids[a]).style.zIndex=a;
}
}
}
</script>
</div>
<input type="button" value="save" onclick="saveAction()">
<script>
//Cycle through images and grab their x/y positions
var saveAction = function(){
elementNames = document.getElementById("canvas").getElementsByTagName("div");
for(var i = 0; i < elementNames.length; i++)
{
var idName = $( "#" + elementNames[i].id);
var offset = idName.offset();
alert("Left pos: " + offset.left + " Top pos: " + offset.top);
}
};
</script>
</div>
</body>
</html>
我已将Javascript放在assets / javascripts / custom_map.js中，并且已将html / css放在我的new_map.html.erb视图中。这些图像在Rails应用程序中显示正常，但它们不可拖动。我怎样才能解决这个问题？谢谢！
答案 0 :(得分：1)
也许您的加载订单不正确或您的资产路径错误。尝试将您的脚本链接为页面上的最后一个内容，并将其中的所有内容包装在jquery ready函数中：
$(function() {
// all your scripts here
});
同时尝试查看您的来源并确保您的.js文件正常投放 它应该是/assets/yourjs.js而不是/assets/javascripts/yourjs.js
另外，我认为您可以使用jquery ui堆栈功能使项目在最顶层（不确定，您可能想尝试）：
$( ".draggable" ).draggable({ stack: ".draggable" });
答案 1 :(得分：0)
在不知道您收到的具体错误的情况下，我只能详细解释您遇到问题的原因，以及如何解决问题：
你永远不应该在你的HTML代码中使用javascript（称为内联JS）。问题是它是凌乱的＆amp;可以很容易地被篡改...因此使它相对不安全，并且通常被视为业余
更好的方法是使用unobtrusive JS（其中JS存储在HTML范围之外的文件中）。 Rails使用asset pipeline：
#app/assets/javascripts/application.js
var ready = function() { // -> you said JQuery :)
$( ".draggable" ).draggable({ grid: [10,10] });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ], snap: true });
/////////////////////////////////
var ids=[],
// grab all the divs (each icon) and put it into thedivs
thedivs = document.getElementById("canvas").getElementsByTagName("div");
for (var i = 0; i < thedivs.length; i++) {
// add the id of each div to the ids array
//alert(thedivs[i].id);
ids.push(thedivs[i].id);
thedivs[i].onclick = function() {
for (var a = 0; a < ids.length; a++) {
if (this.id == ids[a]) {
// take current id that matches the selected id and move it to the end
ids.push(ids.splice(a,1));
}
document.getElementById(ids[a]).style.zIndex=a;
}
}
}
};
$(document).on("page:load ready", ready);
如果您从您的views迁移JS并将其放入asset文件，那么您可以更好地向我们提供反馈，我们可以使用这些反馈来帮助您解决问题进一步