我正在制作一个拖放式JavaScript引擎。我学习了如何将边界框设置为父元素。但是,现在我希望将边界框设置为任何父级的任何父级,或设置为整个页面(无边界)。

现在我的Javascript引擎看起来像:

// JavaScript Document

var dragObj;

document.addEventListener("mousedown", down, false);

function down(event) {
    if(~event.target.className.search(/drag/)) {
        dragObj = makeObj(event.target);
        dragObj.element.style.zIndex="100";
        document.addEventListener("mousemove", freeMovement, false);
    }
}

function freeMovement(event) {

    if (typeof(dragObj.element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    dragObj.element.style.left = Math.max(0, Math.min(event.clientX - dragObj.posX, dragObj.boundX)) + "px";
    dragObj.element.style.top = Math.max(0, Math.min(event.clientY - dragObj.posY, dragObj.boundY)) + "px";
}

function drop() {
    dragObj.element.style.zIndex="1";

    document.removeEventListener("mousemove", freeMovement, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}

function makeBoundlessObj(e) {
    var obj = new Object();
    obj.element = e;

    obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
    obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;

    obj.posX = event.clientX - e.offsetLeft;
    obj.posY = event.clientY - e.offsetTop;

    return obj;
}

function makeObj(e) {
    obj = new Object();
    obj.element = e;

    obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
    obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;

    obj.posX = event.clientX - e.offsetLeft;
    obj.posY = event.clientY - e.offsetTop;

    var curleft = curtop = 0;
    if (e.offsetParent) {
        do {
            curleft += e.offsetLeft;
            curtop += e.offsetTop;
            //alert(e.id + ":" + e.innerHTML);
            if(~e.className.search(/bound/)) {
                obj.boundX = curleft - obj.element.offsetLeft;
                obj.boundY = curtop - obj.element.offsetTop;
                return obj;
            }

        } while (e = e.offsetParent);
    }

    return obj;
}

function findPos(obj) { // Donated by `lwburk` on StackOverflow
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
}

我的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;
}

而且我的HTML很干净:
<div id="center">
    <h1>Hello World! <hr /></h1>
    <div id="box" class="bound">
        <p class="drag square"> One </p>
        <p class="drag square"> Two </p>
    </div>
</div>

我试图多次执行适当的功能。我将给出一个我无法完成的工作,并列出原因:
  • 如果没有界限,则将默认界限设置为父元素(因为我不知道如何将界限设置为整个页面)
  • 如果父元素中的一个元素是绑定(bind),那么我没有正确设置绑定(bind)坐标(同样,我也不知道如何)

  • 哦,在创建drag_object的同时设置了边界。

    JavaScript创建功能:
    function makeObj(e) {
        var obj = new Object();
        obj.element = e;
    
        obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
        obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
    
        obj.posX = event.clientX - e.offsetLeft;
        obj.posY = event.clientY - e.offsetTop;
    
        var curleft = curtop = 0;
        if (e.offsetParent) {
            do {
                curleft += e.offsetLeft;
                curtop += e.offsetTop;
                //alert(e.id + ":" + e.innerHTML);
                if(~e.className.search(/bound/)) {
                    obj.boundX = curleft - obj.element.offsetLeft;
                    obj.boundY = curtop - obj.element.offsetTop;
                    return obj;
                }
    
            } while (e = e.offsetParent);
        }
    
        return obj;
    }
    

    设置边界框的正确数学是什么,为什么?我可以摆脱position: relative类中的.bound吗?我可以使.drag类不是position: absolute吗?我知道所有这些事情可能会极大地影响边界函数的编写方式。如果我在让.drag类或.bound类不需要某种类型的position之间进行选择,则可以选择将.bound类设置为任何定位。

    谢谢大家的阅读和帮助!它对我意义重大;我是全日制(寄宿)高中生,很少有空闲时间= /

    编辑:

    我应该注意,我正处于学习Javascript的第十天或十五个小时,这取决于您的外观,在开始使用jQuery之类的库之前,我想学习该语言。这个引擎是我为自己而进行的一次学术练习,目的是为了了解和学习语言=]

    最佳答案

    我注意到的第一件事是您没有最低限度。您需要执行此操作以强制执行上限和下限。

    设置边界框的正确数学是什么,为什么?

    首先,dragObj需要考虑两个边界(适用于position: absolute):

    // parentNode is our bounding box
    // the minimum boundary is based on the top left corner of our container
    obj.minBoundX = e.parentNode.offsetLeft;
    obj.minBoundY = e.parentNode.offsetTop;
    
    // the maximum is the bottom right corner of the container
    // or.. the top left (x,y) + the height and width (h,y) - the size of the square
    obj.maxBoundX = obj.minBoundX + e.parentNode.offsetWidth - e.offsetWidth;
    obj.maxBoundY = obj.minBoundY + e.parentNode.offsetHeight - e.offsetHeight;
    

    加强边界是对freeMovement的简单更新:
    dragObj.element.style.left = Math.max(dragObj.minBoundX, Math.min(event.clientX - dragObj.posX, dragObj.maxBoundX)) + "px";
    dragObj.element.style.top = Math.max(dragObj.minBoundY, Math.min(event.clientY - dragObj.posY, dragObj.maxBoundY)) + "px";
    

    我可以摆脱这个位置:.bound类中的relative吗?对。

    我可以使.drag类不处于绝对位置吗?对。您只想将自己的职位更改为相对职位,并将计算结果考虑在内即可。例如,您的最小界限现在为0。
    // parentNode is our bounding box
    // the minimum boundary is based on the top left corner of our container
    obj.minBoundX = 0;
    obj.minBoundY = 0;
    

    这是position:absolute版本的JSFiddle:http://jsfiddle.net/feWcQ/(适用于Firefox 4)。我还添加了两个小框来显示您的边界。希望我的回答对您有所帮助!

    关于javascript - 如何在javascript中为可拖动对象设置 “bounding”区域?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5130810/

    10-12 12:47
    查看更多