draggablesの位置を保存するにはどうすればいいですか？

jQueryについては、ちょっと考えていますが、ブラウザでリフレッシュしたときにコードがドラッグ可能な場所を保存する方法を知りたいと思います同じ位置。マウスアップがあるとき https://forum.jquery.com/topic/save-position-of-draggable-item draggablesの位置を保存するにはどうすればいいですか？

あなたが実際にあなたがあなたのドキュメントを読み込むたびに読み込まJSONファイル内の位置を保存することができ、更新：

は

<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>

出典

2017-06-27 rpmoers

この記事が示唆するのと同じように：これは私のコードです抗力の後に発射される。

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>

出典

2017-06-27 15:34:58 TinkeringMatt

なぜdownvote？ – TinkeringMatt

ちょっとマット、これはOPのポストへのコメントでなければならない、またはそれらにコードソリューションを与える必要があります。他の答えにリンクするだけではありません。 –

50人の担当者が必要なので、まだコメントできません。しかし、この回答をコードで編集していただきありがとうございます。 – TinkeringMatt

draggablesの位置を保存するにはどうすればいいですか？

答えて

関連する問題