troubleshooting Question

HTML5 + Mulitple Dragable Images

Avatar of dkilby
dkilbyFlag for Canada asked on
CSSHTMLScripting Languages
8 Comments1 Solution259 ViewsLast Modified:
I am using the below code to create a dragable image, i want to be able to create multiple individual dragable versions of the image depending on a variable, each image independently dragable onto the conatiner.  Is this possible if so how?

      body {
        margin: 5px;
        padding: 5px;
        #container {
        background-color: #336600;
        width: 400px;
        height: 600px;
    <script src=""></script>
    <div id="container"></div>
    <script src=""></script>
        function drawImage(imageObj) {
            var stage = new Kinetic.Stage({
                container: "container",
                width: 500,
                height: 600
            var layer = new Kinetic.Layer();

            // darth vader
            var PlayerImg = new Kinetic.Image({
                image: imageObj,
                x: 445, //stage.getWidth() / 2 - 200 / 2,
                y: 5, // stage.getHeight() / 2 - 137 / 2,
                width: 50,
                height: 75,
                draggable: true

            // add cursor styling
            PlayerImg.on('mouseover', function() {
       = 'pointer';
            PlayerImg.on('mouseout', function() {
       = 'default';

        var imageObj = new Image();
        imageObj.onload = function() {
        imageObj.src = 'images/Player.JPG';


Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros