Question

为什么拖动框不会掉线？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#content {
    background:#CCCCCC;
    width:500px;
    height:500px;
}
#drop {
    height:200px;
    width:200px;
    background:#00FFFF;
    float:right;
}
#drag {
    background:#009966;
    width:100px;
    height:100px;
    float:left;
}
.active {
    background:#FFCC33;
}

</style>
<script type="text/ecmascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#drag').draggable({
            containment: '#content',
            scrollSensitivity: 60,
            revert: true,
            cursor: 'move'
        });

        $('#drop').droppable({
            accept: '#drag',
            drop: function(event, ui) {
                $(this).addClass('.active');
            }
        });

    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

    <div id="content">
        <div id="drag">

        </div>
        <div id="drop">

        </div>

    </div>

</body>
</html>

Answer 1

你发生了3个问题。

jQuery的javascript包含javascript而不是ecmascript：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

.active类不会覆盖#drag（因为它不太具体），您需要将CSS更改为：

#drop.active { background:#FFCC33; }

在jQuery中使用.方法时不要使用addClass()，只需使用类名：

$(this).addClass('active');

以下是这些更改的来源，这应该具有预期的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#content {
    background:#CCCCCC;
    width:500px;
    height:500px;
}
#drop {
    height:200px;
    width:200px;
    background:#00FFFF;
    float:right;
}
#drag {
    background:#009966;
    width:100px;
    height:100px;
    float:left;
}
#drop.active { background:#FFCC33; }

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#drag').draggable({
            containment: '#content',
            scrollSensitivity: 60,
            revert: true,
            cursor: 'move'
        });

        $('#drop').droppable({
            accept: '#drag',
            drop: function(event, ui) {
                $(this).addClass('active');
            }
        });

    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

    <div id="content">
        <div id="drag">

        </div>
        <div id="drop">

        </div>

    </div>

</body>
</html>

Answer 2

draggable使选择器的内容可拖动，而不是选择器本身。你的div是空白的。在那里添加一些东西，这些元素将变得可拖动。

PS：你的问题应该更加冗长。不要说“为什么不起作用？”。问为什么具体的东西不起作用。

Answer 3

有效。如果您想知道为什么它不会改变颜色，那是因为为#droppable定义的样式优先于active所以颜色不会改变。在!important中为背景颜色添加active规则，它应该有效。

非常简单的jquery ui拖放不会掉落

3 个答案: