Drag and Drop problem

[NoPr0n]

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]

Please, I really need help :/

[willigogs]

Maybe providing your code as an example might help?

[NoPr0n]

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.