Response title
This is preview!
jquery and css in html dragging divs
in Getting Started
•
4 years ago
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...
- <!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>
1