Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

jQuery UI Draggable

Options
  • 09-02-2012 6:12pm
    #1
    tolosenc
    Registered Users Posts: 6,889 ✭✭✭


    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>


Advertisement