Question

我试图获得其父文档的顶部和左侧位置问题。我尝试使用偏移和位置。抵消不起作用，位置给我不同的价值观。这是我的代码

<style>
.item{
            width: 30px;
            height: 30px;
            border: solid black 1px;
            cursor: move;
        }
        #item-1{
            position: relative;
            background-color: red;
        }
        #item-2{
            background-color: yellow;
        }
</style>

<div id="image_div" style="border: solid black 1px;position: relative;width: 1024px;height: 460px;overflow: auto">
        <img src="img.jpg"/>
        <div id="fixing_div" style="position:absolute;z-index: 1;background-color: rgba(0,0,0,0.1);top: 0;left: 0;">
            <div id="item-1" class="item"></div><br/>

            <div id="item-2" class="item"></div>
        </div>
    </div>

我想要我的id =＆＃34; item-1＆＃34; div的位置被尊重为id =＆＃34; fixing_div＆＃34; DIV。我怎么能得到它？

N.B：我使用jquery ui，item-1和item-2都可以调整大小并且可以拖动。所以职位将会改变

Answer 1

我不确定你是怎么做的，但这似乎有效：

＆＃13;

$('.item').draggable({
    drag: function () {
        $(this).text('top: '+ $(this).position().top + ' left: ' + $(this).position().left);
    }
});

＆＃13;

.item {
    width: 30px;
    height: 30px;
    border: solid black 1px;
    cursor: move;
}
#item-1 {
    position: relative;
    background-color: red;
}
#item-2 {
    background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="image_div" style="border: solid black 1px;position: relative;width: 1024px;height: 460px;overflow: auto">
    <img src="img.jpg" />
    <div id="fixing_div" style="position:absolute;z-index: 1;background-color: rgba(0,0,0,0.1);top: 0;left: 0;">
        <div id="item-1" class="item"></div>
        <br/>
        <div id="item-2" class="item"></div>
    </div>
</div>

＆＃13;

将div的位置视为jquery中的另一个div

1 个答案: