PDA

View Full Version : Drag and Drop problem



NoPr0n
12 Feb 2013, 12:58 AM
Hello everybody.

I've got a problem with the drag and drop possibility in ExtJs 3.4.
I try to make an HTML table which each <td> is a dropTarget and in which it is possible to place dragzone <div>.
For now, this works, but my <div> are volontary bigger than one <td> (css: float) and my <div> is only draggable in the first <td>.
Unfortunately, <td> are really small and I want my <div> be draggable along their entire length.
Any idea?

PS: Sorry for the bad english :/

NoPr0n
14 Feb 2013, 1:15 AM
Please, I really need help :/

willigogs
14 Feb 2013, 1:42 AM
Maybe providing your code as an example might help? ;)

NoPr0n
14 Feb 2013, 3:18 AM
Yes yes, of course !



<script> var stepID=0;
var availableLine=1;
var allLine=[];


document.write('<div id="newElement" style="background-color:BLUE;height:20px;width:90px;"></div>');
document.write('<table style="border-collapse:collapse;padding:opx;">');


for(var i=0;i<10;i++){
var lineTarget=[];
//DEFINE NEW LINE
document.write('<tr id="line-'+i+'" style="">');
//FOR FIRST LINE
if(i==0){
//DEFINE COLUMNS TITLE
for(var m=0;m<12;m++){
document.write('<th id="title-'+m+'" colspan="4" style="border-style:solid;border-width:1px;border-color:DARK;background-color:LIGHTBLUE;height:30px;width:120px;">');
if(m==0)document.write('<h2>JANVIER</h2>');
if(m==1)document.write('<h2>FEVRIER</h2>');
if(m==2)document.write('<h2>MARS</h2>');
if(m==3)document.write('<h2>AVRIL</h2>');
if(m==4)document.write('<h2>MAI</h2>');
if(m==5)document.write('<h2>JUIN</h2>');
if(m==6)document.write('<h2>JUILLET</h2>');
if(m==7)document.write('<h2>AOUT</h2>');
if(m==8)document.write('<h2>SEPTEMBRE</h2>');
if(m==9)document.write('<h2>OCTOBRE</h2>');
if(m==10)document.write('<h2>NOVEMBRE</h2>');
if(m==11)document.write('<h2>DECEMBRE</h2>');
document.write('</th">');


}
}else{
//DEFINE ALL DROPZONE
for(var y=0;y<48;y++){
document.write('<td style="border-style:solid;border-width:1px;border-color:LIGHTGRAY;height:30px;">');
document.write('<div id="drop-'+i+'-'+y+'" style="position:relative;height:30px;">');
document.write('</div>');
document.write('</td>');
//IF THE LINE ALLOW DROP
if(i==availableLine){
var dropZone = new Ext.dd.DropTarget('drop-'+i+'-'+y,{ddGroup:'availableLine'});
}else{
var dropZone = new Ext.dd.DropTarget('drop-'+i+'-'+y,{ddGroup:'affectedLine'});
}

//WHEN AN ELEMENT IS DROPPEND ON THIS ZONE
dropZone.notifyDrop=function(dd, e, data){
//IF IT'S A NEW ELEMENT
if(data.ddel.id=="newElement"){
//ADD A NEW STEP TO THE DROPZONE
this.el.dom.innerHTML='<div id="step-'+stepID+'" style="position:absolute;background-color:LIGHTBLUE;height:20px;width:90px;float:left;top:5px; z-index: 100;"><div id="left-'+stepID+'" style="float:left;display:inline-block;background-color:BLUE;height:20px;width:10px;"></div><div id="right-'+stepID+'" style="float:right;display:inline-block;background-color:BLUE;height:20px;width:10px;"></div></div>';
//SET THE NEW STEP DRAGGABLE
var item =new Ext.dd.DragZone('step-'+stepID, {ddGroup:'affectedLine-'+stepID,dropZoneOrg:this});
Ext.dd.Registry.register('step-'+stepID);
new Ext.dd.DragZone('right-'+stepID, {ddGroup:'affectedLine-'+stepID,dragParent:item});
Ext.dd.Registry.register('right-'+stepID);
new Ext.dd.DragZone('left-'+stepID, {ddGroup:'affectedLine-'+stepID,dragParent:item});
Ext.dd.Registry.register('left-'+stepID);

//SET THE NEXT LINE AVAILABLE
availableLine++;

//SET THE CURRENT LINE ONLY DROPPABLE FOR THIS STEP
for(drop in allLine[this.el.dom.parentNode.parentNode.id]){
if(drop!='remove'){
allLine[this.el.dom.parentNode.parentNode.id][drop].removeFromGroup('availableLine');
allLine[this.el.dom.parentNode.parentNode.id][drop].addToGroup('affectedLine-'+stepID);
}
}
//SET THE NEXT LINE AVAILABLE
for(drop in allLine['line-'+availableLine]){
if(drop!='remove'){
allLine['line-'+availableLine][drop].addToGroup('availableLine');
}
}

//SET THE NEW ID OF THE NEXT STEP
stepID++;

//IF IT'S AN ELEMENT ALREADY DROPPEND ON THIS LINE
}else if(data.ddel.id.substr(0,4)=='step'){
dd.el.appendTo(this.el);
}else if(data.ddel.id.substr(0,5)=='right'){
//TO DO
console.log(dd.dragParent.dropZoneOrg.id);
console.log(allLine[this.el.dom.parentNode.parentNode.id].indexOf(dd.dragParent.dropZoneOrg.id));


}else if(data.ddel.id.substr(0,4)=='left'){
//TO DO
console.log("left");
}
return true;
}
//MEMORIZE THE DROPZONE IN THE LINE
lineTarget['drop-'+i+'-'+y]=dropZone;
}
}
document.write('</tr>');
//MEMORIZE THE LINE ON ALLLINE
allLine['line-'+i]=lineTarget;
}
document.write('</table>');
new Ext.dd.DragZone("newElement", {ddGroup:'availableLine'});
Ext.dd.Registry.register("newElement");
</script>


Sorry if it's a little messy.
This code is not the final code, it's only to make some tests.