Question

这里的问题是toggleClass位置顶部：0px; left：0px不会触发..只有宽度和高度以及background-color才会激活..如果我不会拖动div（draggable）它会工作..如果我开始拖动元素，切换类定位不会效果..我不知道在jquery中是否有这样的功能来帮助这个..

<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="jquery.ui.draggable.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#x").draggable().dblclick(function(){
                $(this).toggleClass("hi");
            });
        });
    </script>        
    <style>
        .hello {
            background:red;
            width:200px;
            height:200px;
            position:relative;
            top:100px;
            left:100px;
        }

        .hi {
            background:yellow;
            position:relative;
            width:300px;
            height:300px;
            top:0px;
            left:0px;
        }
    </style>
</head> 
<body>
    <div id="x" class="hello">

    </div>    
</body>
</html>

Answer 1

可拖动的东西干扰了你的定位。当您拖动left时，可拖动将通过top属性分配特定的style和<div> CSS，style属性会覆盖来自class的值{1}}属性。您可以使用!important：

解决此问题

.hi {
    background: yellow;
    position: relative;
    width: 300px;
    height: 300px;
    top: 0px !important;
    left: 0px !important;
}

当然，<div>类添加hi后，!important将不再可拖动，因为{{1}}位置将覆盖可拖动的内容。

我建议您自己使用WebKit浏览器（例如Chrome或Safari）进行测试和调试，WebKit的“检查元素”非常棒，比我在整理HTML / CSS问题时遇到的更好

jQuery draggable + toggleClass问题

1 个答案: