jquery and css in html dragging divs

jquery and css in html dragging divs

Hi there,

I plan to combine CSS and JQUERY inside HTML on a regular basis. Note that my knowledge of both is "below par". I found an excellent JFIDDLE example of draggable divs (link below). When I attempt to combine the CSS and JQUERY in a HTML file (code below the link)  ... the divs do not drag ...

What have I missed?

Hoping for a hero to rescue me... Thx ... Kevin...

http://jsfiddle.net/LQ4JT/7/


  1. <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #box1 {width: 150px; height: 150px; background-color: red; position: absolute; top: 0px; left: 0px; z-index: 0}
    #box2 {width: 150px; height: 150px; background-color: green; position: absolute; top: 20px; left: 50px; z-index: 0}
    #box3 {width: 150px; height: 150px; background-color: yellow; position: absolute; top: 50px; left: 100px; z-index: 0}
    #box4 {width: 150px; height: 150px; background-color: blue; position: absolute; top: 70px; left: 200px; z-index: 0}
    .top {z-index: 2; position: relative}
    .bottom {z-index: 1; position: relative}
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
    <script>
    $(document).ready(function() {
        var a = 3;
        $('#box1,#box2,#box3,#box4').draggable({
       start: function(event, ui) { $(this).css("z-index", a++); }
    });
        $('#dragZone div').click(function() {
            $(this).addClass('top').removeClass('bottom');
            $(this).siblings().removeClass('top').addClass('bottom');
            $(this).css("z-index", a++);
        });
    });
    </script>
    </head>
    <body>
    <div id="dragZone">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
    </div>
    </body>
    </html>