Dag and Drop image to another image
I pretty new to jquery and what I want to do is to place the "fruit" images into a "basket" image AND for there to be an alert or comment appear when the "fruit" images are placed on top of the basket image also when this happens for any images placed on top of the basket to stay fixed to that image.. With this code I can drag the images on top of the other image but I want them to stay fixed to that location.This is the code I have so far. How can I do it with this code? or any advice would be really appreciated.Thank you for anyone taking time to reply.
- function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function drawBackground(background, shelfs, text) {
var canvas = background.getCanvas();
var context = background.getContext();
context.drawImage(shelfs, 13, 25);
}
function initStage(images) {
var stage = new Kinetic.Stage("container", 900, 900);
var background = new Kinetic.Layer();
var layer = new Kinetic.Layer();
stage.add(background);
drawBackground(background, images.shelfs);
// basket back
var basketbackImg = new Kinetic.Image({
image: images.basketback,
x: 42,
y: 588,
width: 500,
height: 232,
});
layer.add(basketbackImg);
stage.add(layer);
// orange
var orangeImg = new Kinetic.Image({
image: images.orange,
x: 170,
y: 150,
width: 95,
height: 94,
});
orangeImg.draggable(true);
orangeImg.hideBorder();
orangeImg.on("dragstart", function(){
stage.draw();
});
orangeImg.on("mouseover", function(){
this.showBorder();
stage.draw();
document.body.style.cursor = "pointer";
});
orangeImg.on("mouseout", function(){
this.hideBorder();
stage.draw();
document.body.style.cursor = "default";
});
layer.add(orangeImg);
// strawberry
var strawberryImg = new Kinetic.Image({
image: images.strawberry,
x: 98,
y: 175,
width: 100,
height: 88,
});
strawberryImg.draggable(true);
strawberryImg.hideBorder();
strawberryImg.on("dragstart", function(){
// this.moveToTop();
stage.draw();
});
strawberryImg.on("mouseover", function(){
this.showBorder();
stage.draw();
document.body.style.cursor = "pointer";
});
strawberryImg.on("mouseout", function(){
this.hideBorder();
stage.draw();
document.body.style.cursor = "default";
});
layer.add(strawberryImg);
stage.add(layer);
// basket front
var basketfrontImg = new Kinetic.Image({
image: images.basketfront,
x: 42,
y: 639,
width: 500,
height: 259,
});
layer.add(basketfrontImg);
stage.add(layer);
}
window.onload = function(){
var sources = {
shelfs: "shelfs.png",
orange: "orange.png",
strawberry: "strawberry.png",
basketback: "basketback.png",
basketfront: "basketfront.png",
};
loadImages(sources, initStage);
};