El problema que tengo es que todos los ejemplos que he visto de drag and drop son de mover una imagen a un sitio concreto, y necesito mover una imagen a cualquier posicion de la pantalla, ademas esa imagen deberia clonarse, alguien sabe como hacerlo?
10 días después
Al final tengo este codigo para el html:
spoiler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paint Tool</title>
<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>
<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="init.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 3px black;
margin-top: 10px;
width:wWidth-20;
height:wHeight-20;
}
#toolbar{
width:wWidth-20;
height:wHeight-20;
border:solid 3px black;
}
#toolbar2{
width:wWidth-20;
height:wHeight-20;
border:solid 3px black;
}
#toolbar3{
width:wWidth-20;
height:wHeight-20;
border:solid 3px black;
}
</style>
</head>
<body>
<script type="text/javascript">
/// Prevent native scrolling in iOS.
Event.add(document.body, 'touchmove', Event.prevent);
/// Prevent right-click on desktops.
Event.add(document.body, 'contextmenu', Event.prevent);
</script>
<div id = "toolbar">
<img id = "paint" width=52 height=52 src="img/Lapiz Negro-01.png">
<img id = "paint2" width=52 height=52 src="img/Lapiz Rojo-01.png">
<img id = "erase" width=52 height=52 src="img/Goma-01.png">
<img id = "clear" width=52 height=52 src="img/Limpiar-01.png">
<img id = "size1" width=52 height=52 src="img/Dot Small-01.png">
<img id = "size2" width=52 height=52 src="img/Dot Medium-01.png">
<img id = "size3" width=52 height=52 src="img/Dot Big-01.png">
<img id = "save" width=52 height=52 src="img/Guardar-01.png">
</div><br>
<div id="toolbar2">
<img id="via1" width=52 height=52 src="img/Cruce1.png">
<img id="via2" width=52 height=52 src="img/Cruce2.png">
<img id="via3" width=52 height=52 src="img/Cruce3.png">
<img id="via4" width=52 height=52 src="img/Cruce4.png">
<img id="via5" width=52 height=52 src="img/Cruce5.png">
<img id="via6" width=52 height=52 src="img/Cruce6.png">
<img id="via7" width=52 height=52 src="img/Cruce7.png">
<img id="via8" width=52 height=52 src="img/Cruce8.png">
<img id="via9" width=52 height=52 src="img/Curva1.png">
<img id="via10" width=52 height=52 src="img/Curva2.png">
<img id="via11" width=52 height=52 src="img/Curva3.png">
<img id="via12" width=52 height=52 src="img/Curva4.png">
<img id="via13" width=52 height=52 src="img/MediaCurva1.png">
<img id="via14" width=52 height=52 src="img/MediaCurva2.png">
<img id="via15" width=52 height=52 src="img/MediaCurva3.png">
<img id="via16" width=52 height=52 src="img/MediaCurva4.png">
<img id="via17" width=52 height=52 src="img/Recta1.png">
<img id="via18" width=52 height=52 src="img/Recta2.png">
</div><br>
<div id="toolbar3">
<img id="icon1" width=52 height=52 src="img/Icon1.png">
<img id="icon2" width=52 height=52 src="img/Icon2.png">
<img id="icon3" width=52 height=52 src="img/Icon3.png">
<img id="icon4" width=52 height=52 src="img/Icon4.png">
<img id="icon5" width=52 height=52 src="img/Icon5.png">
<img id="icon6" width=52 height=52 src="img/Icon6.png">
<img id="icon7" width=52 height=52 src="img/Icon7.png">
<img id="icon8" width=52 height=52 src="img/Icon8.png">
<img id="icon9" width=52 height=52 src="img/Icon9.png">
<img id="icon10" width=52 height=52 src="img/Icon10.png">
<img id="icon11" width=52 height=52 src="img/Icon11.png">
<img id="icon12" width=52 height=52 src="img/Icon12.png">
<img id="icon13" width=52 height=52 src="img/Icon13.png">
<img id="icon14" width=52 height=52 src="img/Icon14.png">
<img id="icon15" width=52 height=52 src="img/Icon15.png">
</div><br>
<div id="container"></div>
</body>
</html>Y este para el JS:
spoiler
function init() {
var wWidth = window.innerWidth - 100;
var wHeigth = window.innerHeight - 100;
var color ="black";
var sizeDraw = 5;
/**
* get a reference to the via in the toolbar
*hide the via until its image has loaded
*/
var $via1=$("#via1");
$via1.hide();
var $via2=$("#via2");
$via2.hide();
var $via3=$("#via3");
$via3.hide();
var $via4=$("#via4");
$via4.hide();
var $via5=$("#via5");
$via5.hide();
var $via6=$("#via6");
$via6.hide();
var $via7=$("#via7");
$via7.hide();
var $via8=$("#via8");
$via8.hide();
var $via9=$("#via9");
$via9.hide();
var $via10=$("#via10");
$via10.hide();
var $via11=$("#via11");
$via11.hide();
var $via12=$("#via12");
$via12.hide();
var $via13=$("#via13");
$via13.hide();
var $via14=$("#via14");
$via14.hide();
var $via15=$("#via15");
$via15.hide();
var $via16=$("#via16");
$via16.hide();
var $via17=$("#via17");
$via17.hide();
var $via18=$("#via18");
$via18.hide();
/**
* get a reference to the icon in the toolbar
* hide the icon until its image has loaded
*/
var $icon1=$("#icon1");
$icon1.hide();
var $icon2=$("#icon2");
$icon2.hide();
var $icon3=$("#icon3");
$icon3.hide();
var $icon4=$("#icon4");
$icon4.hide();
var $icon5=$("#icon5");
$icon5.hide();
var $icon6=$("#icon6");
$icon6.hide();
var $icon7=$("#icon7");
$icon7.hide();
var $icon8=$("#icon8");
$icon8.hide();
var $icon9=$("#icon9");
$icon9.hide();
var $icon10=$("#icon10");
$icon10.hide();
var $icon11=$("#icon11");
$icon11.hide();
var $icon12=$("#icon12");
$icon12.hide();
var $icon13=$("#icon13");
$icon13.hide();
var $icon14=$("#icon14");
$icon14.hide();
var $icon15=$("#icon15");
$icon15.hide();
var $icon16=$("#icon16");
$icon16.hide();
var $icon17=$("#icon17");
$icon17.hide();
var $icon18=$("#icon18");
$icon18.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: wWidth,
height: wHeigth
});
var layer = new Kinetic.Layer();
stage.add(layer);
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: wWidth+10,
height: wHeigth+10,
fill: 'white',
stroke: 'black',
strokeWidth: 1,
})
layer.add(background);
layer.draw();
// a flag we use to see if we're dragging the mouse
var isMouseDown=false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points=[];
// on the background
// listen for mousedown, mouseup and mousemove events
background.on('mousedown', function(){onMousedown();});
background.on('mouseup', function(){onMouseup();});
background.on('mousemove', function(){onMousemove();});
//background.on('touchstart', function(){onMousedown();});
//background.on('touchend', function(){onMouseup();});
//background.on('touchmove', function(){onMousemove();});
// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
isMouseDown = true;
points=[];
points.push(stage.getPointerPosition());
var line = new Kinetic.Line({
points: points,
stroke: color,
strokeWidth: sizeDraw,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
newline=line;
}
// on mouseup end the line by clearing the isMouseDown flag
function onMouseup(event) {
isMouseDown=false;
}
// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
if(!isMouseDown){return;};
points.push(stage.getPointerPosition());
newline.setPoints(points);
layer.drawScene();
}
// 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(){
$via1.show();
}
image1.src="img/Cruce1.png";
var image2=new Image();
image2.onload=function(){
$via2.show();
}
image2.src="img/Cruce2.png";
var image3=new Image();
image3.onload=function(){
$via3.show();
}
image3.src="img/Cruce3.png";
var image4=new Image();
image4.onload=function(){
$via4.show();
}
image4.src="img/Cruce4.png";
var image5=new Image();
image5.onload=function(){
$via5.show();
}
image5.src="img/Cruce5.png";
var image6=new Image();
image6.onload=function(){
$via6.show();
}
image6.src="img/Cruce6.png";
var image7=new Image();
image7.onload=function(){
$via7.show();
}
image7.src="img/Cruce7.png";
var image8=new Image();
image8.onload=function(){
$via8.show();
}
image8.src="img/Cruce8.png";
var image9=new Image();
image9.onload=function(){
$via9.show();
}
image9.src="img/Curva1.png";
var image10=new Image();
image10.onload=function(){
$via10.show();
}
image10.src="img/Curva2.png";
var image11=new Image();
image11.onload=function(){
$via11.show();
}
image11.src="img/Curva3.png";
var image12=new Image();
image12.onload=function(){
$via12.show();
}
image12.src="img/Curva4.png";
var image13=new Image();
image13.onload=function(){
$via13.show();
}
image13.src="img/MediaCurva1.png";
var image14=new Image();
image14.onload=function(){
$via14.show();
}
image14.src="img/MediaCurva2.png";
var image15=new Image();
image15.onload=function(){
$via15.show();
}
image15.src="img/MediaCurva3.png";
var image16=new Image();
image16.onload=function(){
$via16.show();
}
image16.src="img/MediaCurva4.png";
var image17=new Image();
image17.onload=function(){
$via17.show();
}
image17.src="img/Recta1.png";
var image18=new Image();
image18.onload=function(){
$via18.show();
}
image18.src="img/Recta2.png";
//Icons
var imgicon1=new Image();
imgicon1.onload=function(){
$icon1.show();
}
imgicon1.src="img/Icon1.png";
var imgicon2=new Image();
imgicon2.onload=function(){
$icon2.show();
}
imgicon2.src="img/Icon2.png";
var imgicon3=new Image();
imgicon3.onload=function(){
$icon3.show();
}
imgicon3.src="img/Icon3.png";
var imgicon4=new Image();
imgicon4.onload=function(){
$icon4.show();
}
imgicon4.src="img/Icon4.png";
var imgicon5=new Image();
imgicon5.onload=function(){
$icon5.show();
}
imgicon5.src="img/Icon5.png";
var imgicon6=new Image();
imgicon6.onload=function(){
$icon6.show();
}
imgicon6.src="img/Icon6.png";
var imgicon7=new Image();
imgicon7.onload=function(){
$icon7.show();
}
imgicon7.src="img/Icon7.png";
var imgicon8=new Image();
imgicon8.onload=function(){
$icon8.show();
}
imgicon8.src="img/Icon8.png";
var imgicon9=new Image();
imgicon9.onload=function(){
$icon9.show();
}
imgicon9.src="img/Icon9.png";
var imgicon10=new Image();
imgicon10.onload=function(){
$icon10.show();
}
imgicon10.src="img/Icon10.png";
var imgicon11=new Image();
imgicon11.onload=function(){
$icon11.show();
}
imgicon11.src="img/Icon11.png";
var imgicon12=new Image();
imgicon12.onload=function(){
$icon12.show();
}
imgicon12.src="img/Icon12.png";
var imgicon13=new Image();
imgicon13.onload=function(){
$icon13.show();
}
imgicon13.src="img/Icon13.png";
var imgicon14=new Image();
imgicon14.onload=function(){
$icon14.show();
}
imgicon14.src="img/Icon14.png";
var imgicon15=new Image();
imgicon15.onload=function(){
$icon15.show();
}
imgicon15.src="img/Icon15.png";
var imgicon16=new Image();
imgicon16.onload=function(){
$icon16.show();
}
imgicon16.src="img/Icon16.png";
var imgicon17=new Image();
imgicon17.onload=function(){
$icon17.show();
}
imgicon17.src="img/Icon17.png";
var imgicon18=new Image();
imgicon18.onload=function(){
$icon18.show();
}
imgicon18.src="img/Icon18.png";
//Creation of listeners for click and touch events.
$('#erase').get(0).addEventListener('click', function(e) { erase(); }, false);
$('#clear').get(0).addEventListener('click', function(e) { onReset(); }, false);
$('#size1').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#size2').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#size3').get(0).addEventListener('click', function(e) { onSizeClick(e.target.id); }, false);
$('#save').get(0).addEventListener('click', function(e) { onSave(); }, false);
$('#paint').get(0).addEventListener('click', function(e) { paint(); }, false);
$('#paint2').get(0).addEventListener('click', function(e) { paintRed(); }, false);
//Change brush color to white
function erase(){
color = "white";
}
//Change brush color to black
function paint(){
color = "black";
}
//Change brush color to red
function paintRed(){
color = "red";
}
//Make vias draggables.
$via1.draggable({
helper:'clone',
});
$via2.draggable({
helper:'clone',
});
$via3.draggable({
helper:'clone',
});
$via4.draggable({
helper:'clone',
});
$via5.draggable({
helper:'clone',
});
$via6.draggable({
helper:'clone',
});
$via7.draggable({
helper:'clone',
});
$via8.draggable({
helper:'clone',
});
$via9.draggable({
helper:'clone',
});
$via10.draggable({
helper:'clone',
});
$via11.draggable({
helper:'clone',
});
$via12.draggable({
helper:'clone',
});
$via13.draggable({
helper:'clone',
});
$via14.draggable({
helper:'clone',
});
$via15.draggable({
helper:'clone',
});
$via16.draggable({
helper:'clone',
});
$via17.draggable({
helper:'clone',
});
$via18.draggable({
helper:'clone',
});
//Make icons draggables.
$icon1.draggable({
helper:'clone',
});
$icon2.draggable({
helper:'clone',
});
$icon3.draggable({
helper:'clone',
});
$icon4.draggable({
helper:'clone',
});
$icon5.draggable({
helper:'clone',
});
$icon6.draggable({
helper:'clone',
});
$icon7.draggable({
helper:'clone',
});
$icon8.draggable({
helper:'clone',
});
$icon9.draggable({
helper:'clone',
});
$icon10.draggable({
helper:'clone',
});
$icon11.draggable({
helper:'clone',
});
$icon12.draggable({
helper:'clone',
});
$icon13.draggable({
helper:'clone',
});
$icon14.draggable({
helper:'clone',
});
$icon15.draggable({
helper:'clone',
});
$icon16.draggable({
helper:'clone',
});
$icon17.draggable({
helper:'clone',
});
$icon18.draggable({
helper:'clone',
});
// set the data payload
$via1.data("url","via1.png"); // key-value pair
$via1.data("width","32"); // key-value pair
$via1.data("height","33"); // key-value pair
$via1.data("image",image1); // key-value pair
$via2.data("url","via2.png"); // key-value pair
$via2.data("width","32"); // key-value pair
$via2.data("height","33"); // key-value pair
$via2.data("image",image2); // key-value pair
$via3.data("url","via3.png"); // key-value pair
$via3.data("width","32"); // key-value pair
$via3.data("height","33"); // key-value pair
$via3.data("image",image3); // key-value pair
$via4.data("url","via4.png"); // key-value pair
$via4.data("width","32"); // key-value pair
$via4.data("height","33"); // key-value pair
$via4.data("image",image4); // key-value pair
$via5.data("url","via5.png"); // key-value pair
$via5.data("width","32"); // key-value pair
$via5.data("height","33"); // key-value pair
$via5.data("image",image5); // key-value pair
$via6.data("url","via6.png"); // key-value pair
$via6.data("width","32"); // key-value pair
$via6.data("height","33"); // key-value pair
$via6.data("image",image6); // key-value pair
$via7.data("url","via7.png"); // key-value pair
$via7.data("width","32"); // key-value pair
$via7.data("height","33"); // key-value pair
$via7.data("image",image7); // key-value pair
$via8.data("url","via8.png"); // key-value pair
$via8.data("width","32"); // key-value pair
$via8.data("height","33"); // key-value pair
$via8.data("image",image8); // key-value pair
$via9.data("url","via9.png"); // key-value pair
$via9.data("width","32"); // key-value pair
$via9.data("height","33"); // key-value pair
$via9.data("image",image9); // key-value pair
$via10.data("url","via10.png"); // key-value pair
$via10.data("width","32"); // key-value pair
$via10.data("height","33"); // key-value pair
$via10.data("image",image10); // key-value pair
$via11.data("url","via11.png"); // key-value pair
$via11.data("width","32"); // key-value pair
$via11.data("height","33"); // key-value pair
$via11.data("image",image11); // key-value pair
$via12.data("url","via12.png"); // key-value pair
$via12.data("width","32"); // key-value pair
$via12.data("height","33"); // key-value pair
$via12.data("image",image12); // key-value pair
$via13.data("url","via13.png"); // key-value pair
$via13.data("width","32"); // key-value pair
$via13.data("height","33"); // key-value pair
$via13.data("image",image13); // key-value pair
$via14.data("url","via13.png"); // key-value pair
$via14.data("width","32"); // key-value pair
$via14.data("height","33"); // key-value pair
$via14.data("image",image14); // key-value pair
$via15.data("url","via15.png"); // key-value pair
$via15.data("width","32"); // key-value pair
$via15.data("height","33"); // key-value pair
$via15.data("image",image15); // key-value pair
$via16.data("url","via16.png"); // key-value pair
$via16.data("width","32"); // key-value pair
$via16.data("height","33"); // key-value pair
$via16.data("image",image16); // key-value pair
$via17.data("url","via17.png"); // key-value pair
$via17.data("width","32"); // key-value pair
$via17.data("height","33"); // key-value pair
$via17.data("image",image17); // key-value pair
$via18.data("url","via18.png"); // key-value pair
$via18.data("width","32"); // key-value pair
$via18.data("height","33"); // key-value pair
$via18.data("image",image18); // key-value pair
//Icons
$icon1.data("url","icon1.png"); // key-value pair
$icon1.data("width","32"); // key-value pair
$icon1.data("height","33"); // key-value pair
$icon1.data("image",imgicon1); // key-value pair
$icon2.data("url","icon2.png"); // key-value pair
$icon2.data("width","32"); // key-value pair
$icon2.data("height","33"); // key-value pair
$icon2.data("image",imgicon2); // key-value pair
$icon3.data("url","icon3.png"); // key-value pair
$icon3.data("width","32"); // key-value pair
$icon3.data("height","33"); // key-value pair
$icon3.data("image",imgicon3); // key-value pair
$icon4.data("url","icon4.png"); // key-value pair
$icon4.data("width","32"); // key-value pair
$icon4.data("height","33"); // key-value pair
$icon4.data("image",imgicon4); // key-value pair
$icon5.data("url","icon5.png"); // key-value pair
$icon5.data("width","32"); // key-value pair
$icon5.data("height","33"); // key-value pair
$icon5.data("image",imgicon5); // key-value pair
$icon6.data("url","icon6.png"); // key-value pair
$icon6.data("width","32"); // key-value pair
$icon6.data("height","33"); // key-value pair
$icon6.data("image",imgicon6); // key-value pair
$icon7.data("url","icon7.png"); // key-value pair
$icon7.data("width","32"); // key-value pair
$icon7.data("height","33"); // key-value pair
$icon7.data("image",imgicon7); // key-value pair
$icon8.data("url","icon8.png"); // key-value pair
$icon8.data("width","32"); // key-value pair
$icon8.data("height","33"); // key-value pair
$icon8.data("image",imgicon8); // key-value pair
$icon9.data("url","icon9.png"); // key-value pair
$icon9.data("width","32"); // key-value pair
$icon9.data("height","33"); // key-value pair
$icon9.data("image",imgicon9); // key-value pair
$icon10.data("url","icon10.png"); // key-value pair
$icon10.data("width","32"); // key-value pair
$icon10.data("height","33"); // key-value pair
$icon10.data("image",imgicon10); // key-value pair
$icon11.data("url","icon11.png"); // key-value pair
$icon11.data("width","32"); // key-value pair
$icon11.data("height","33"); // key-value pair
$icon11.data("image",imgicon11); // key-value pair
$icon12.data("url","icon12.png"); // key-value pair
$icon12.data("width","32"); // key-value pair
$icon12.data("height","33"); // key-value pair
$icon12.data("image",imgicon12); // key-value pair
$icon13.data("url","icon13.png"); // key-value pair
$icon13.data("width","32"); // key-value pair
$icon13.data("height","33"); // key-value pair
$icon13.data("image",imgicon13); // key-value pair
$icon14.data("url","icon13.png"); // key-value pair
$icon14.data("width","32"); // key-value pair
$icon14.data("height","33"); // key-value pair
$icon14.data("image",imgicon14); // key-value pair
$icon15.data("url","icon15.png"); // key-value pair
$icon15.data("width","32"); // key-value pair
$icon15.data("height","33"); // key-value pair
$icon15.data("image",imgicon15); // key-value pair
$icon16.data("url","icon16.png"); // key-value pair
$icon16.data("width","32"); // key-value pair
$icon16.data("height","33"); // key-value pair
$icon16.data("image",imgicon16); // key-value pair
$icon17.data("url","icon17.png"); // key-value pair
$icon17.data("width","32"); // key-value pair
$icon17.data("height","33"); // key-value pair
$icon17.data("image",imgicon17); // key-value pair
$icon18.data("url","icon18.png"); // key-value pair
$icon18.data("width","32"); // key-value pair
$icon18.data("height","33"); // key-value pair
$icon18.data("image",imgicon18); // key-value pair
// make the Kinetic Container a dropzone
$stageContainer.droppable({
drop:dragDrop,
});
// handle a drop into the Kinetic container
function dragDrop(e,ui){
// get the drop point
e.preventDefault();
var x = parseInt(ui.offset.left-offsetX);
var y = parseInt(ui.offset.top-offsetY);
// 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
});
layer.add(image);
layer.draw();
}
//Remove the current backgraund and add a new
function onReset() {
background.remove();
layer.add(background);
layer.draw();
}
//Transform into image the current stage.
function onSave(){
stage.toDataURL({
callback: function(dataUrl) {
window.open(dataUrl,'Screenshot','toolbar=1,scrollbars=1,location=1,statusbar=0,menubar=0,resizable=1,width=800,height=600');
}
});
}
//Change the sizeDraw depending of the image clicked.
function onSizeClick(size) {
if(size == 'size1'){
sizeDraw = 5;
}
else if(size == 'size2'){
sizeDraw = 10;
}
else {
sizeDraw = 20;
}
}
}Funciona bien en Firefox y Chrome pero no funciona en android y ios la parte del drag and drop, alguien sabe que es lo que hago mal?
PD: Se que el codigo es esta muy mal estructurado, es lo primero que hago en html y javascript xD
- Favoritos
- 1 / 1