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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

jQuery UI Draggable

  • 09-02-2012 5:12pm
    #1
    tolosenc
    Registered Users, Registered Users 2 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