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
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
    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