Question

我是jquery的新手我已经为图像拖动设计了自定义形状。我能够检索＆＃34; Top＆＃34;的值。和＆＃34;左＆＃34;位置。但是我无法将这个位置存储在永久性的图像拖动之后。即使我不知道如何在不使用数据库的情况下使用它。以下是我的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>

Answer 1

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

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

将有助于检索值。

拖动后如何保存图像位置

1 个答案: