如何在拖動後保存圖像位置

我是jquery的新手我已經設計了圖像框架的圖像拖動自定義形狀。我可以檢索「頂部」和「左側」位置的值。但是我無法在拖放圖像後爲永久存儲位置。即使我不知道如何使用數據庫，它是不可能的。下面是我的代碼爲test.php如何在拖動後保存圖像位置

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script> 
$(function() { 
    $(".headerimage").css('cursor', 'pointer'); 
    var y1 = $('.picturecontainer').height(); 
    var y2 = $('.headerimage').height(); 
    var x1 = $('.picturecontainer').width(); 
    var x2 = $('.headerimage').width(); 
    $(".headerimage").draggable({ 
     scroll: false, 
     containment: "#picturecontainer", 
     drag: function(event, ui) { 
      document.getElementById("img_top").value = ui.position.top; 
      document.getElementById("img_left").value = ui.position.left; 
      if (ui.position.top >= 0) 
      { 
       ui.position.top = 0; 
      } 
      else if (ui.position.top <= y1 - y2) 
      { 
       ui.position.top = y1 - y2; 
      } 
      else if (ui.position.left <= x1 - x2) 
      { 
       ui.position.left = x1 - x2; 
      } 
     }, 
     stop: function(event, ui) { 
      //#### 
     } 
    }); 
});

<style> 
    .picturecontainer{ 
     overflow: hidden; 
     position: relative; 
     width: 350px; 
     height: 350px; 
     background: #d3d3d3; 
     /* border: 1px solid #888;*/ 
     background-size:cover; 
     -webkit-shape-outside: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%); 
     shape-outside: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%); 
     -webkit-clip-path: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%); 
     -webkit-shape-margin: 20px; 
    } 
</style> 

<h2>Example 1</h2> 
<div class="ui-widget-content" style="padding:10px;"> 
    TOP : <input type="text" name="img_top" id="img_top" value="" /><br /> 
    LEFT : <input type="text" name="img_left" id="img_left" value="" /><br /> 
    <div class="picturecontainer" style=""> 
     <img style="position: absolute;" class="headerimage ui-corner-all" src="img/1.jpg" /> 
     <br /> 
    </div> 
    <input id="saveImage" type="button" value="Save" /> 
</div>

來源

2014-06-27 user3782872

與你的'拖動'功能相比，而不是'停止'嗎？ – putvande

@putvande沒有得到你...相同我不得不在停止功能或什麼？ – user3782872

我想是的。這取決於你想要保存的內容。 – putvande

你必須使用服務器端腳本和值保存到數據庫中，這兩個

document.getElementById("img_top").value = ui.position.top; 
document.getElementById("img_left").value = ui.position.left;

將有助於檢索值。

來源

2014-07-03 11:52:25

如何在拖動後保存圖像位置

回答

相關問題