Dhiraj Devkar Dhiraj Devkar - 10 months ago 31
jQuery Question

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>

Answer Source

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

}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download