Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

jQuery UI Draggable

  • 09-02-2012 06: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