拖动后如何保存图像位置答案

【问题标题】：How to save image position after drag拖动后如何保存图像位置
【发布时间】：2014-06-27 11:17:21
【问题描述】：

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

【问题讨论】：

执行与drag 函数相同的操作，但与stop 不同？
@putvande 没有得到你...我必须在停止功能或什么中提及？
我想是的。这取决于您要保存的内容。
@putvande 我想保存位置，如果我将图像向左或向右、顶部或底部拖动，那么在再次重新加载页面后，新位置不应改变。用于保存我想使用保存按钮的位置。
你是如何保存它的？单击“保存”按钮后，会发生什么？实际保存位置的代码在哪里？

标签： php jquery css draggable jquery-draggable

【解决方案1】：

您必须使用服务器端脚本并将值保存到数据库中，这两个

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

将有助于检索值。

【讨论】：