Hi,
I've started playing around with the jQuery UI Library, and in order to test myself, I decided to make a basic image tagging script. Unfortunately, it's not working when I pass parameters to the .draggable() function. I have no clue why, as everything in my code (below) looks fine to me, and the code works otherwise.
Any ideas?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/black-tie/jquery-ui.css"/>
<script>
var count = 0;
$(document).ready(
function ()
{
$("#wrapper").click(
function (e)
{
$("#tags").append("<textarea id=\"xval" + count + "\"></textarea><textarea id=\"yval" + count + "\"></textarea><textarea id=\"wval" + count + "\"></textarea><textarea id=\"hval" + count + "\"></textarea><br /><br />");
$("#wrapper").append("<div id=\"object" + count + "\" style=\"height:50px; width:50px;border:1px solid blue; z-index:" + (100 + count) + "; position:absolute; display:none; color:blue;\">" + (count + 1) + "</div>");
$("#object" + count).css({left: (e.pageX), top: (e.pageY)}).show();
$("#object" + count).resizable( { handles : 'se', containment : 'parent', start : function() { $("#hval" + count).html($("#object" + count).height() + "px"); $("#wval" + count).html($("#object" + count).width() + "px"); }, stop : function() { $("#hval" + count).html($("#object" + count).height() + "px"); $("#wval" + count).html($("#object" + count).width() + "px"); }, resize : function() { $("#hval" + count).html($("#object" + count).height() + "px"); $("#wval" + count).html($("#object" + count).width() + "px"); } } ).draggable( { containment : 'parent', start : function() { $("#xval" + count).html(($("#object" + count).offset().left - $("#wrapper").offset().left)); $("#yval" + count).html(($("#object" + count).offset().top - $("#wrapper").offset().top)); }, stop : function() { $("#xval" + count).html(($("#object" + count).offset().left - $("#wrapper").offset().left)); $("#yval" + count).html(($("#object" + count).offset().top - $("#wrapper").offset().top)); }, drag : function() { $("#xval" + count).html(($("#object" + count).offset().left - $("#wrapper").offset().left)); $("#yval" + count).html(($("#object" + count).offset().top - $("#wrapper").offset().top)); } } );
count++;
}
);
}
);
</script>
<title>
Tester
</title>
</head>
<body>
<div id="wrapper" style="width:auto; height:auto; background-color:blue; margin:0 auto; padding:0; z-index:-10; float:left; margin-bottom:10px; margin-right:10px;">
<img src="image5.png" />
</div>
<form id="tags">
<input type="submit" value="Submit" />
</form>
</body>
</html>
