Question

我正在制作sticky note system，我希望使用javascript可以拖动便笺。我在这个site上找到了一个拖放脚本，这对我来说非常有用。但是我有一个“拖动条”，它位于粘滞便笺div内，它应该是你可以拖动特定粘滞便笺的唯一地方。脚本我只拖动光标点击的内容，我希望它拖动“.dragbar”div的父元素“.parent”。

现在，当您单击.parent时，脚本设置为拖动.parent。如何在此代码中选择“.dragbar”的父div，即“.parent”？

如果我让脚本选择.dragbar，它只是在.parent内部移动拖动条。注意：脚本是原始代码，但第87行和第95行中的选择器名称从“拖动”更改为“父”。

<!DOCTYPE html>
<html>

    <head>
        <style type="text/css">
            .pagecontent {
                width:98%;
                height:96%;
                overflow:hidden;
                background:lightyellow;
                border:1px solid black;
                padding:10px;
            }
            .parent {
                position:relative;
                height:300px;
                width:300px;
                background-color:gray;
                border:1px solid black;
                float:left;
                margin:0 10px 0 0;
                overflow:auto;
            }
            .dragbar {
                height:50px;
                width:300px;
                background:lightgray;
                cursor:move;
                position:relative;
            }
        </style>
    </head>

    <body>
        <div class="pagecontent">
            <h1>Dragging Practice</h1>
            <h3>Drag and drop the parent div by using the child dragbar</h3>
            <pre id="debug">mouse up</pre>
            <div class="parent">
                <div class="dragbar">I am the Child, my class is .dragbar</div>I am the Parent, my class is
                .parent</div>
            <div class="parent">
                <div class="dragbar">I am the Child, my class is .dragbar</div>I am the Parent, my class is
                .parent</div>
            <script language="JavaScript" type="text/javascript">
                <!--
                // this is simply a shortcut for the eyes and fingers
                function $(id) {
                    return document.getElementById(id);
                }
                var _startX = 0; // mouse starting positions
                var _startY = 0;
                var _offsetX = 0; // current element offset
                var _offsetY = 0;
                var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
                var _oldZIndex = 0; // we temporarily increase the z-index during drag
                var _debug = $('debug'); // makes life easier
                InitDragDrop();

                function InitDragDrop() {
                    document.onmousedown = OnMouseDown;
                    document.onmouseup = OnMouseUp;
                }

                function OnMouseDown(e) {
                    // IE is retarded and doesn't pass the event object
                    if (e == null) e = window.event;
                    // IE uses srcElement, others use target
                    var target = e.target != null ? e.target : e.srcElement;
                    _debug.innerHTML = target.className == 'parent' //Selector
                    ?
                    'draggable element clicked' : 'NON-draggable element clicked';
                    // for IE, left click == 1
                    // for Firefox, left click == 0
                    if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'parent') //Selector
                    {
                        // grab the mouse position
                        _startX = e.clientX;
                        _startY = e.clientY;
                        // grab the clicked element's position
                        _offsetX = ExtractNumber(target.style.left);
                        _offsetY = ExtractNumber(target.style.top);
                        // bring the clicked element to the front while it is being dragged
                        _oldZIndex = target.style.zIndex;
                        target.style.zIndex = 10000;
                        // we need to access the element in OnMouseMove
                        _dragElement = target;
                        // tell our code to start moving the element with the mouse
                        document.onmousemove = OnMouseMove;
                        // cancel out any text selections
                        document.body.focus();
                        // prevent text selection in IE
                        document.onselectstart = function () {
                            return false;
                        };
                        // prevent IE from trying to drag an image
                        target.ondragstart = function () {
                            return false;
                        };
                        // prevent text selection (except IE)
                        return false;
                    }
                }

                function ExtractNumber(value) {
                    var n = parseInt(value);
                    return n == null || isNaN(n) ? 0 : n;
                }

                function OnMouseMove(e) {
                    if (e == null) var e = window.event;
                    // this is the actual "drag code"
                    _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
                    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
                    _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
                }

                function OnMouseUp(e) {
                    if (_dragElement != null) {
                        _dragElement.style.zIndex = _oldZIndex;
                        // we're done with these events until the next OnMouseDown
                        document.onmousemove = null;
                        document.onselectstart = null;
                        _dragElement.ondragstart = null;
                        // this is how we know we're not dragging
                        _dragElement = null;
                        _debug.innerHTML = 'mouse up';
                    }
                }
                //-->
            </script>
        </div>
    </body>

</html>

Answer 1

我建议你调查jQuery UI's draggable和droppable。毫无疑问，这些将比你链接的脚本更强大，你可以使用jQuery强大的选择器设置可拖动的元素，并且只能在某些元素中放置。

在Javascript中拖放

1 个答案: