Question

我有一个div，其中包含一个可以在div内拖动的图像，以获取图像裁剪的坐标。我能够得到正确的坐标，但是一旦我将图像拖到某个位置，我就不能重新划分到另一个位置，如果我不喜欢图像的细节......我哪里出错了..最终位置x + y将保存到隐藏输入中......这是我的代码：

    <!-- Div container 350x350px with border where detail of image can be chosen -->
<div id="draggable">
    <!-- Image (bigger than div draggable) that is draggable in the div -->
<img id="dragimg" src="<?php echo $path_to_image_directory.$filename; ?>" />
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#dragimg").draggable({
            stop: function(){
                var finalxPos = $(this).css('left');
                var finalyPos = $(this).css('top');
                //  alert( "Drag stopped!\n\nOffset: (" 
                + finalxPos + ", " + 
                finalyPos + ")\n");
                $('#crop [name="finalX"]').val(finalxPos);
                $('#crop [name="finalY"]').val(finalyPos);
            }
        });
    });
</script>

你能帮助我解决我的问题吗？

Answer 1

要获得父母的绝对位置是.position（）

$('.object').bind('drag',function(){

 var obj = $(this);
 var position = obj.position();
 var leftpos = position.left;
 var toppos = position.top;
 });

你可以添加像

这样的输入值函数

<input type="text" name="top" id="topVal"/>

并在绑定函数中

$('#topVal').val(toppos);

Jquery draggable - 获取图像坐标

1 个答案: