Very simple jquery ui drag and drop does not work. Why not?

Posted by Catfish on Stack Overflow See other posts from Stack Overflow or by Catfish
Published on 2010-03-12T02:52:37Z Indexed on 2010/03/12 2:57 UTC
Read the original article Hit count: 327

Filed under:
|

WHy doesn't this work?

<!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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui