当draggable = True时,为什么CSS Transform不起作用?

时间:2017-10-20 16:30:52

标签: javascript html css drag-and-drop draggable

我正在使用Internet Explorer。我正在尝试创建一个Drop Box,当在框中拖动一些内容时打开一个盖子。将鼠标移到Box上时,onhover可以很好地工作。但是,在创建其他内容时,设置draggable = true,然后在框中拖动内容,CSS和onhover无法正常工作。我用Google搜索了这个,直到我变绿了。任何帮助,将不胜感激。 代码如下:



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
        <style>
            body {
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
            }
    
            #DaBoxLid {
                background-color: saddlebrown;
                text-align: center;
                width: 100px;
                height: 40px;
                line-height: 40px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
                margin-top: 100px;
                -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
                transition: transform 2s, margin-bottom 2s, transform 2s;
            }
    
                #DaBoxLid:hover {
                    -webkit-transform: rotate(25deg);
                    -moz-transform: rotate(25deg);
                    -o-transform: rotate(25deg);
                    -ms-transform: rotate(25deg);
                    transform: translateX(15px) translateY(-17px) rotate(25deg);
                }
    
            #DaBox {
                background-color: saddlebrown;
                text-align: center;
                width: 100px;
                height: 50px;
                line-height: 50px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
    
            #Container {
                width: 1200px;
                margin-left: auto;
                margin-right: auto;
                border: 1px solid black;
            }
    
      
        </style>
    </head>
    
    <body>
        <form id="form1">
    
            <div id="Container">
                <div id="TheContent" draggable="true">Drag My Content</div>
                <div id="DaBoxLid">
                </div>
    
                <div id="DaBox">
                    My Drop Box
                </div>
            </div>
        </form>
    </body>
    </html>
&#13;
&#13;
&#13;

0 个答案:

没有答案