javascript - 不能拖动用 div 创建的窗口

Question

嘿，我正在尝试拖动以下窗口

使用以下代码:

var zindex = 0;
var dragobject = {
    z: 0, 
    x: 0, 
    y: 0, 
    offsetx: null, 
    offsety: null, 
    targetobj: null, 
    dragapproved: 0,
    initialize:function(){
        document.onmousedown=this.drag
        document.onmouseup=function(){this.dragapproved=0}
    },
    drag:function(e){
        var evtobj=window.event? window.event : e
        this.targetobj=window.event? event.srcElement : e.target

        if (this.targetobj.className=="drag"){
            this.dragapproved=1
            zindex = zindex + 1;
            $("#" + this.targetobj.id).css('z-index', zindex);
            //document.getElementById(this.targetobj.id).style.zIndex='1'

            if (isNaN(parseInt(this.targetobj.style.left))) {
                this.targetobj.style.left=0
            }

            if (isNaN(parseInt(this.targetobj.style.top))) {
                this.targetobj.style.top=0
            }

            this.offsetx=parseInt(this.targetobj.style.left)
            this.offsety=parseInt(this.targetobj.style.top)
            this.x=evtobj.clientX
            this.y=evtobj.clientY

            if (evtobj.preventDefault)
                evtobj.preventDefault()
                document.onmousemove=dragobject.moveit
            }
        },
        moveit:function(e){
            var evtobj=window.event? window.event : e

            if (this.dragapproved==1){
                this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
                this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
                return false
            }
        }
    }

dragobject.initialize()

CSS:

.heading{
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.drag{
position:relative;
cursor:hand;
}

和 html:

<div style="background:#eeeeee; height:500px; width:400px; border-radius:5px; border:0px solid #8d8d8d; border-top:0px; box-shadow: 0 0 2px 2px rgba(0,0,0,0.5);" id="window1">

            <!-- Window Heading -->
            <div id="window1x" class="heading drag" style="height:32px;border-top-right-radius:5px;border-top-left-radius:5px;" align="center">

                <div style="padding-top:6px;font-size:15px;color:#FFF;text-shadow:0 1px 0 #000;">Window</div>

                <!-- Close, Maximize, Minimize Button -->

                <!-- End Of Close, Maximize, Minimize Button -->

            </div>
            <!-- End Of Window Heading -->



        </div>

但它似乎不起作用，我的意思是当 drag css 在带有 id="window1" 的 div 中时我可以拖动窗口，但我不能用黑色标题拖动它，我必须用窗口中的白色空间拖动它，希望我说清楚了。当 drag css 位于带有 id="window1x" 的 div 中时，我根本无法拖动窗口，如上面的 html 代码所示，事实上我不能拖动任何东西。谁能告诉我如何解决这个问题。谢谢!

P.S 我通过查看来自 here 的示例源代码找到了拖动代码

Answer 1

尝试添加 pointer-events: none;到标题栏的 CSS。

所以:

.heading {
    pointer-events: none;
}

这将允许点击事件传递到执行拖动的实际容器 div。

参见 jsfiddle 。 警告:这在 IE10 或更低版本中不起作用。