Question

我用JavaScript制作了一个拖放引擎，我现在正在添加一个“边界”功能。我的问题是边界元素的位置会根据其父级position:属性而改变。

换句话说这个html：

<div id="center" class="bound">
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square" id="one"> One </p>
        <p class="drag square" id="two"> Two </p>
    </div>
</div>

和这个html：

<div id="center"> <!-- Difference is here -->
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square" id="one"> One </p>
        <p class="drag square" id="two"> Two </p>
    </div>
</div>

以不同的方式影响发动机，他们不应该。只有<div id="box" class="bound">会影响拖动对象。

这是CSS：

@charset "utf-8";
/* CSS Document */


* {
    padding: 0px;
    margin: 0px;
}    

.drag {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bound {
    position: relative;
}

.square {
    width: 100px;
    height: 100px;
    background: red;
    cursor:move;
}

#center {
    width: 500px;
    height: 300px;
    margin: auto;
    margin-top: 50px;
    background-color:#ccc;
    text-align: center;
    border-radius: 25px;
    -moz-border-radius: 25px;
}

#box {
    background-color: #FF3;
    height: 278px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    opacity: 0.5;
}

如果有人要求设置边界的JavaScript函数，我很乐意将其发布到编辑中！

要使position属性不影响我的JavaScript，我需要将所有内容转换为绝对坐标吗？我该怎么做？将所有内容翻译成绝对坐标是否允许JavaScript以相同的方式处理两个html样本？

Answer 1

AFAIK，要拖放，该元素的位置属性必须为absolute或fixed。

当然，当你改变位置属性时它的位置会改变。

如何使所有位置属性相同？

1 个答案: