PDA

View Full Version : Sprite Drag And Drop



salaem
26 Mar 2018, 5:10 AM
Hi All,

is there anyone so kind as to explain which is the best practice to have Drag and Drop between sprites working, please?

I'm using ExtJs 4.0.7 and the best result I could achieve so far is to map events of the property dd of a draggable sprite used in conjuction with a Ext.dd.DropTarget object mapped on the window containing the Ext.draw.ComponentView object.

In other words, my situation is something like this:

var drawComponent;
var win;


Ext4.onReady(function(){


function drawOverlay(){


var sprite = drawComponent.surface.add({
type: 'path',
path: ['M546 52 L 648 52 ',
'M546 58 L 603 58 L 603 102 L 648 102'],
stroke: '#FF0000',
'stroke-width': 1
});


sprite.show(true);


}


function drawObject(){


var draggableSprite = drawComponent.surface.add({
type: 'rect',
x: 350,
y: 80,
width: 100,
height: 100,
stroke:'#1F6D91',
fill: '#1F6D91',
draggable:true
});


draggableSprite.dd.onBeforeDrag = function (data,e){


console.log('Before dragging...');


}


draggableSprite.dd.afterValidDrop = function(target,e,id){


console.log('After Valid Drop!');


}


draggableSprite.dd.afterInvalidDrop = function(target,e,id){


console.log('After Invalid Drop!');


}


var dropArea = Ext4.create('Ext.dd.DropTarget',win.getEl(),{
});


dropArea.notifyDrop = function (source,e,data){


console.log('Dropped...');
return(true);


};


/*
dropArea.notifyOver = function (source,e,data){


console.log('Dragging Over...');


};
*/


draggableSprite.show(true);


}


drawComponent = Ext4.create('Ext.draw.Component', {
viewBox: false,
items: [{
type: 'image',
src: '/contents/specific/rlag/sprites/Image.png',
width: 700,
height: 550,
x: 0,
y: 0
}]
});


win = Ext4.create('Ext.Window', {
width: 712,
height: 585,
layout: 'fit',
items: [drawComponent]
}).show();


drawOverlay();
drawObject();
Ext.getBody().unmask();


});


Everything works fine, but I'd like to know whether it's possible to have a sprite as a drop target rather than the whole window.

Thank you in advance

Best Regards