个人中心
gpt4 book ai didi

javascript - 添加 JQuery 功能

转载 作者：行者123 更新时间：2023-12-03 12:37:35 31 4
gpt4 key购买 nike

我正在尝试将 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 放置在 asset/javascripts/custom_map.js 中，并将 html/css 放置在 new_map.html.erb View 中。图像在 Rails 应用程序中显示良好，但不可拖动。我怎样才能解决这个问题？谢谢!

最佳答案

可能您的加载顺序不正确或者您的资源路径错误。尝试将脚本链接为页面上的最后一件事，并将其中的所有内容包装在 jquery 就绪函数中:

    $(function() {
      // all your scripts here
    });

另请尝试查看您的源代码并确保您的 .js 文件正常运行它应该是/assets/yourjs.js 而不是/assets/javascripts/yourjs.js

另外，我认为您也许可以使用 jquery ui stack 函数使项目沉淀在顶部(不确定，您可能想尝试一下):

$( ".draggable" ).draggable({ stack: ".draggable" });

关于javascript - 添加 JQuery 功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23668416/

31 4 0
文章推荐： javascript - $.getJSON(p) 远程请求失败
文章推荐： javascript - 可以在ajax调用中传递html元素
文章推荐： javascript - jquery ajax 出错
文章推荐： javascript - Emberjs模型渲染
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com