Why do hoverClass and activeClass properties won't work together ?

Posted by Dumb Questioner on Stack Overflow See other posts from Stack Overflow or by Dumb Questioner
Published on 2010-03-16T12:44:14Z Indexed on 2010/03/16 12:46 UTC
Read the original article Hit count: 219

Why do hoverClass and activeClass properties not work together in the following example ?

<html>
<head>
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>

    <style type="text/css">
        .draggable              {width:100px; height:100px; padding-bottom:5px; background-color:#dddddd;}
        #dropBox                {width:556px;  height:400px; }
        .sameStylePrecedenceAsDropHoverAndActive    {background-color:#ff4490;}
        .drop-hover             {background-color: #ff8040; }
        .drop-active            {background-color: #ffffff; }
    </style>


    <script type="text/javascript">
    $(document).ready(function() {
    $('.draggable').draggable({
        helper: 'clone'
    });

    $('#dropBox').droppable({
        accept: '.draggable',
        activeClass: 'drop-active',
        hoverClass: 'drop-hover',   
        drop: function(event, ui) {
            alert("Dropped!");
        }
    });
});
    </script>
</head>

<body>
    <div id="dropBox" class="sameStylePrecedenceAsDropHoverAndActive"></div>
    <div class="draggable">asd</div>
</body>
</html>

© Stack Overflow or respective owner

Related posts about jquery-ui

Related posts about jquery-plugins