Question

对于jQuery，我有点像菜鸟，想知道如何在我的代码中保存可拖动的位置，以便在浏览器刷新时保持相同的位置。这是我的代码：

<style>

    #draggable1 { 
      width: 25px; 
      height: 25px; 
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: white;
      background-color: #19467c;
      border-radius: 3px;
      float: left;
      font-size: 13px;
      line-height: 15%;
    }

    #draggable2 { 
      width: 25px; 
      height: 25px; 
      margin-right: 10px;
      margin-bottom: 10px;      
      text-align: center;
      color: white;
      background-color: #19467c;
      border-radius: 3px;
      float: left;
      font-size: 13px;
      line-height: 15%;
    }

    #draggable3 { 
      width: 25px; 
      height: 25px;
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: white;
      background-color: #19467c;
      border-radius: 3px;
      cursor: grab;
      float: left;
      font-size: 13px;
      line-height: 15%;
    }

    #draggable4 { 
      width: 25px; 
      height: 25px; 
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: white;
      background-color: #19467c;
      border-radius: 3px;
      cursor: grab;
      float: left;
      font-size: 13px;
      line-height: 15%;
    }

    #draggable5 { 
      width: 25px; 
      height: 25px; 
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: center;
      color: white;
      background-color: #19467c;
      border-radius: 3px;
      cursor: grab;
      float: left;
      font-size: 13px;
      line-height: 15%;
    }

      #container{
          width: 35px;
      }

  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
            $( function() {
                $( "#draggable1" ).draggable();
              } );

            $( function() {
                $( "#draggable2" ).draggable();
              } );

            $( function() {
                $( "#draggable3" ).draggable();
              } );

            $( function() {
                $( "#draggable4" ).draggable();
              } );

            $( function() {
                $( "#draggable5" ).draggable();
              } );

    </script>
</head>
<body>

    <div id="container">

        <div id="draggable1" class="ui-widget-content">
          <p>1</p>
        </div>

         <div id="draggable2" class="ui-widget-content">
          <p>2</p>
        </div>

        <div id="draggable3" class="ui-widget-content">
          <p>3</p>
        </div>

        <div id="draggable4" class="ui-widget-content">
          <p>4</p>
        </div>

        <div id="draggable5" class="ui-widget-content">
          <p>5</p>
        </div> 

    </div>

<img src="motor.jpg" style="float;">

</body>
</html>

Answer 1

正如这篇文章所暗示的那样： https://forum.jquery.com/topic/save-position-of-draggable-item

您实际上可以将位置保存在每次加载文档时读取的JSON文件中，并在拖动后触发鼠标时更新。

var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$("#draggable3").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});

  .draggable {
      width: 90px;
      height: 90px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
  }
  #draggable, #draggable2 {
      margin-bottom:20px;
  }
  #draggable {
      cursor: n-resize;
  }
  #draggable3 {
      cursor: move;
  }
  #containment-wrapper {
      width: 700px;
      height:500px;
      border:1px solid #000;
      padding: 5px;
  }
  h3 {
      clear: left;
  }

<h3>TEST ME BELOW:</h3>

<div id="containment-wrapper">
    <div id="draggable3" class="draggable ui-widget-content">
        <p>DRAG ME</p>
    </div>

如何保存可拖动的位置

1 个答案: