#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    Dragable Canvas in Javascript


    Hi I'm a newbie to using Javascript and Canvas.

    I've created a Canvas document "Hello World" that I can display on my webpage with JavaScript. My problem is I want to make the image object dragable.

    The following code is what I've tried, but it doesn't seem to work.

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    
    <script type="text/javascript">
    $(function() {
        $("#draggable").draggable();
    });
    </script>
    <style>
          #canvas {
             margin; 20px;
             padding: 20px;
             background: #ffffff;
             border: thin inset #aaaaaa
             width: 600px;
             height: 300px;
           }
    </style>
    </head>
    <body>
         <canvas id ='canvas' width='600' height='300'>
           Canvas not supported
         </canvas>
    	<script src='example.js'></script>
    
    <!--
    	<script src="example.js"/></script>
        	<img src="act2.jpg" class="drag-image" id="draggable"/>
    
    -->
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    Code:
    $(function() {
        $("#canvas").draggable();
    });
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0
    This is now working perfectly!
    (LOL - What a simple correction too!)

    Thank you very much Web_Loone08 !!!

    MainTour

    http://forums.devshed.com/editpost.php?do=editpost&p=2867232#

IMN logo majestic logo threadwatch logo seochat tools logo