Start Building Professional
Web Apps Today

Drag from grid drop in div

Dear Team,

This is a follow up of my previous question (drag row and drop on form element) where I managed to drag a row to a form element...

In a knowledge base example (Drag And Drop in menu) I've seen that it is possible to drag an element/row to a div. But with my current code I can't get it to work.

For example:

<table width="600px">
        <tr>
<td>
                <div id="gridbox2" width="270px" height="250px" style="background-color:white;"></div>
</td>
            <td>
                <div id="sInput1" style="width:120px; height:17px; border:1px solid #CCC; color:000;"></div>
            </td>
        </tr>
    </table>


<script>
    mygrid2 = new dhtmlXGridObject('gridbox2');
    mygrid2.selMultiRows = true;
    mygrid2.setImagePath("imgs/");
    var flds = "Alpha,Betta";
    mygrid2.setHeader(flds);
    mygrid2.setInitWidths("100,150")
    mygrid2.setColAlign("right,left")
    mygrid2.setColTypes("ed,ed");
    mygrid2.setColSorting("int,str");
    mygrid2.setColumnColor("white,#d5f1ff");
    mygrid2.setMultiLine(false);
    mygrid2.enableDragAndDrop(true);
    mygrid2.init();
    mygrid2.loadXML("grid.xml");
    
    
    var sinput=document.getElementById('sInput');
    
    function s_control(){
        this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
            targetHtmlObject.style.backgroundColor="";
            //targetHtmlObject.value=sourceHtmlObject.parentObject.label;
            //How do we get the row_id of selected/dragged row... 
            targetHtmlObject.value=mygrid2.cells(mygrid2._dragged[0].idd,0).getValue
        }
    
        this._dragIn=function(htmlObject,shtmlObject){
            htmlObject.style.backgroundColor="#fffacd";
            return htmlObject;
        }
    
        this._dragOut=function(htmlObject){
            htmlObject.style.backgroundColor="";
            return this;
        }
    }
    
    mygrid2.dragger.addDragLanding(sinput, new s_control);
</script>

Doesn't work for sInput. I can see it light up on hover (dragIn) but when 'it drops' it doesn't show.

Could you please help me?

There are two typos in your code

 var sinput=document.getElementById('sInput');
must be
 var sinput=document.getElementById('sInput1');

 targetHtmlObject.value=mygrid2.cells(mygrid2._dragged[0].idd,0).getValue
must be
 targetHtmlObject.innerHTML=mygrid2.cells(mygrid2._dragged[0].idd,0).getValue();

With them fixed, all works correctly