CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
Dhiraj Devkar
Dhiraj Devkar

Reputation: 593

How to get Id of image in canvas

I am trying to drag drop image in canvas and i am getting perfect co-ordinates of that image in canvas. But i want Id of image which is currently dragged and dropped. how can we get the Id of image which is curently dragged and dropped in the canvas.

this is my code:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
        <style>
            body{padding:20px;}
            #container{
                border:solid 1px #ccc;
                margin-top: 10px;
                width:350px;
                height:350px;
            }
            #toolbar{
                width:350px;
                height:35px;
                border:solid 1px blue;
            }
            #buttons > input {
                padding: 10px;
                display: block;
                margin-top: 5px;
            }
            #buttons {
                position: absolute;
                top: 5px;
                left: 10px;
            </style>
        </head>
        <body>
            <script>window.tableIndex = 0;
                window.tablePositionList = [[], []];
            </script>

            <h4>Drag from  onto canvas. Then drag around canvas.</h4>
            <div id="toolbar">
                <img id="house2" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg"><input type="hidden" id="house2_hidden" value="">
                <img id="house" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"><input type="hidden" id="house_hidden" value="">
                <img id="house6" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg"><input type="hidden" id="house6_hidden" value="">
                <br>
            </div>
            <div id="container"></div>
            <div id="buttons">
                <input type="button" id="clear" value="Clear">
                <input type="button" id="submit"  value="Submit" >
            </div>

            <script>
//                var $tools = $(".tool");
                //global variable
//                var imageId;
//                imageId = document.getElementById('house2_hidden').value = "house2";
//                imageId = document.getElementById('house_hidden').value = "house";
//                imageId = document.getElementById('house6_hidden').value = "house6";
                var global_image;
                // get a reference to the house icon in the toolbar
                // hide the icon until its image has loaded
                var $house = $("#house");
                $house.hide();

                var $house2 = $("#house2");
                $house2.hide();

                var $house6 = $("#house6");
                $house6.hide()


                // get the offset position of the kinetic container
                var $stageContainer = $("#container");
                var stageOffset = $stageContainer.offset();
                var offsetX = stageOffset.left;
                var offsetY = stageOffset.top;
                // create the Kinetic.Stage and layer
                var stage = new Kinetic.Stage({
                    container: 'container',
                    width: 350,
                    height: 350
                });
                var layer = new Kinetic.Layer();
                stage.add(layer);
                // start loading the image used in the draggable toolbar element
                // this image will be used in a new Kinetic.Image
                var image1 = new Image();
                image1.onload = function () {
                    $house.show();
                };
                var image2 = new Image();
                image2.onload = function () {
                    $house2.show();
                };
                var image3 = new Image();
                image3.onload = function () {
                    $house6.show();
                };
                image1.src = "https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";
                image2.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
                image3.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
                // make the toolbar image draggable
                $("#house").draggable({
                    helper: 'clone',
                    obstacle: "#house",
                    preventCollision: true,
                    containment: 'container'
                });
                $("#house2").draggable({
                    helper: 'clone',
                    obstacle: "#house2",
                    preventCollision: true,
                    containment: 'container'
                });
                $("#house6").draggable({
                    helper: 'clone',
                    obstacle: "#house6",
                    preventCollision: true,
                    containment: 'container'
                });
                // set the data payload
                $house.data("url", "house.png"); // key-value pair
                $house.data("width", "32"); // key-value pair
                $house.data("height", "33"); // key-value pair
                $house.data("image", image1); // key-value pair

                $house2.data("url", "house204-1.jpg"); // key-value pair
                $house2.data("width", "32"); // key-value pair
                $house2.data("height", "33"); // key-value pair
                $house2.data("image", image2); // key-value pair

                $house6.data("url", "house204-1.jpg"); // key-value pair
                $house6.data("width", "32"); // key-value pair
                $house6.data("height", "33"); // key-value pair
                $house6.data("image", image3); // key-value pair

                // make the Kinetic Container a dropzone
                $stageContainer.droppable({
                    tolerance: 'fit',
                    drop: dragDrop
                });

                // handle a drop into the Kinetic container
                function dragDrop(e, ui) {
                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);



                    console.log(x);
                    console.log(y);
                    // get the drop payload (here the payload is the image)
                    var element = ui.draggable;
                    var data = element.data("url");
                    var theImage = element.data("image");
                    // create a new Kinetic.Image at the drop point
                    // be sure to adjust for any border width (here border==1)
                    var image = new Kinetic.Image({
                        name: data,
                        x: x,
                        y: y,
                        image: theImage,
                        draggable: true
                    });
                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);

                    global_image = image;
                    //
                    layer.add(image);
                    layer.draw();
                    $("#clear").click(function () {

                    });
                    document.getElementById('clear').addEventListener('click', function () {

                    });

                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);


                    window.tablePositionList[tableIndex] = [x, y];
                    window.tableIndex++;

                }


            </script>
            <div style="height: 20px;width: 20px;background-color: red;" onclick="getImageValue();">
            </div>
            <script>
                document.getElementById('submit').addEventListener('click', function () {

                    console.log(tablePositionList)
                });
                function getImageValue()
                {
                    console.log("global_image.data");
//                        console.log(tableIndex);
                    global_image.destroy();
                    layer.draw();
//                        var backindex = tableIndex - 1;
//                    window.tablePositionList.remove(tableIndex, 1);
                    window.tablePositionList.pop();
                    window.tableIndex--;

                }
//                function clear() {
//                    console.log("global_image.data");
//                    global_image.destroy();
//                    layer.draw();
//                }
            </script>
        </body>

    </html>

Upvotes: 2

Views: 1483

Answers (3)

Surender
Surender

Reputation: 757

Add this script to catch the dragstop event. 

$('.tool.ui-draggable').on('dragstop', function(e){ var imgid = $(e.target).attr('id'); console.log(imgid);});

You can capture dragstart / drag events as well.

Upvotes: 0

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

Use ui.draggable.attr('id'); in your dragDrop function to get the id of the dragged image.

Simple solution for you to get the id of the dragged item.

var draggedElementID = ui.draggable.attr('id');

Here is the code where you can access it.

function dragDrop(e, ui) {
    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);


    // Below line gives you the id of the image that is dragged.
    var draggedElementID = ui.draggable.attr('id');



    console.log(x);
    console.log(y);
    // get the drop payload (here the payload is the image)
    var element = ui.draggable;
    var data = element.data("url");
    var theImage = element.data("image");
    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Kinetic.Image({
        name: data,
        x: x,
        y: y,
        image: theImage,
        draggable: true
    });
    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);

    global_image = image;
    //
    layer.add(image);
    layer.draw();
    $("#clear").click(function () {

    });
    document.getElementById('clear').addEventListener('click', function () {

    });

    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);


    window.tablePositionList[tableIndex] = [x, y];
    window.tableIndex++;

}

Upvotes: 1

Michal Lison
Michal Lison

Reputation: 489

In your dragDrop function, you have access to element variable which contains the element that is being dragged. You can access its ID attribute for example like this:

element[0].id

or with jQuery:

$(element).attr('id')

Upvotes: 0

Related Questions