Very simple jquery ui drag and drop does not drop
WHy doesn't the drag box drop?
<!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 i开发者_如何转开发d="drop">
</div>
</div>
</body>
</html>
You have 3 issues happening.
The javascript include for jQuery should be javascript instead of ecmascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
The .active class won't override #drag (because it's less specific) you need to change the CSS to:
#drop.active { background:#FFCC33; }
And in jQuery don't use the . when using the addClass() method, just use the class name:
$(this).addClass('active');
Here's your source with those changes, this should have the intended effect:
<!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>
draggable makes the contents of your selector draggable, not the selector itself. Your divs are blank. Add something in there and those elements will becomes draggable.
PS: You should be a little more verbose in your question. Don't say "Why doesn't it work?". Ask why specific things don't work.
It works. If you are wondering why it doesn't change the color, it's because the styles defined for #droppable take priority over active so the color wont change. Add a !important rule for the background color in active and it should work.
加载中,请稍侯......
精彩评论