How dragdrop grid

[altagur]

Dear programmers. How do dragdrop from one unidbgrid to another. First of all need set property draggable=true. But where write this property. Secondery need assign dragdrop events. I am use html 5 example and put on grid form tunihtmlframe with this code

 

 

<script type="text/javascript">

 

var grid = document.getElementById(LeftDocs.MainGrid.id);

function dragStart(evt)
{
  alert('startdrag');

}

 

grid.addEventListener("dragstart", dragStart, false); 

 

 

But event not fiered

 

Please help me.

 

 

PS

Full script version:

<script type="text/javascript">

// set vars (RUN = DoInit, ajaxtarget = Target for ajaxRequests, dropbox = dropbox Element for events):

var ajaxtarget = DocTbl.dropHtml;
var ldropbox = document.getElementById(LeftDocs.MainGrid.id);
var rdropbox = document.getElementById(RightDocs.MainGrid.id);
var curtarget;

function GetGrid(obj)
{
 var grid = obj;
 var par = 0;
 while((par==0)&&(grid!=null)){
   if(grid == ldropbox){
     par = 1;
   }else if (grid == rdropbox){
     par = 2;
   }else{
     grid = grid.parentNode;
   }
 }
 return grid;
}


function dragStart(evt)
{
  alert('startdrag');
 var curgrid = GetGrid(evt.target); //new Object(); var par = GetGrid(ev.target, curgrid);
   if (curgrid!=null)
   {
   ev.dataTransfer.effectAllowed='copy';
   ev.dataTransfer.setData("gridid", curgrid.getAttribute('id'));
   ev.dataTransfer.setDragImage(evt.target,100,100);
   return true;
   }
}

function dragEnter(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function dragExit(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}


function drop(evt)
{
  evt.stopPropagation();
  evt.preventDefault();
 
  curtarget = GetGrid(evt.target);
   
  if (curtarget == ldropbox){
    par = 1;
  } else if (curtarget == rdropbox){
    par = 2;
  } else {
    par = 0;
  }  
 
  //alert(ev.target.id);
  // get Files and Count:
  var files = evt.dataTransfer.files;
  var count = files.length;
  // Only call the handler if 1 or more files was dropped:
  if (count > 0)
  {
    curtarget = par;
    handleFiles(files);
  }
  else
  {
    var gridid = ev.dataTransfer.getData("gridid");
    if (gridid!=0)
    {
      var srcgrid = document.getElementById(gridid); // var grid = GetGrid(obj);
      if((srcgrid!=null)&&(srcgrid!=curtarget))
      {
        ajaxRequest(ajaxtarget, "drop data", ["par="+par]);
      }
    }    
  }
}

function initEventHandlers()
{
  // set EventHandlers for dropbox for drag and drop:
  ldropbox.addEventListener("dragenter", dragEnter, false);
  ldropbox.addEventListener("dragexit",  dragExit,  false);
  ldropbox.addEventListener("dragover",  dragOver,  false);
  ldropbox.addEventListener("drop",      drop,      false);
  ldropbox.addEventListener("dragstart", dragStart, false);  

  rdropbox.addEventListener("dragenter", dragEnter, false);
  rdropbox.addEventListener("dragexit",  dragExit,  false);
  rdropbox.addEventListener("dragover",  dragOver,  false);
  rdropbox.addEventListener("drop",      drop,      false);
  rdropbox.addEventListener("dragstart", dragStart, false);  
}


function handleFiles(files)
{
  // for each file to upload:
  for (var i = 0, f; f = files; i++)
  {
     // init FileReader for this file:
     var reader = new FileReader();

     // notify the upload start:
     ajaxRequest(ajaxtarget, "uploadingfile", ["filename="+f.name, "filesize="+f.size, "filetype="+f.type]);
     
     // set event handler "reader.onprogress":
     reader.onprogress = (function(f) {
             return function(e) {
                  // notify file upload progress (e is a Progressevent):
                  var percentLoaded = Math.round((e.loaded / e.total) * 100);
               ajaxRequest(ajaxtarget, "uploadingprogress",
             ["filename="+f.name, "filesize="+f.size, "filetype="+f.type,
              "loaded="+e.loaded, "total="+e.total, "percent="+percentLoaded]);             
             }
     })(f);

     // set event handler "reader.onload":
     reader.onload = (function(f) {
        return function(e) {
           // send to server e.target.result , filename, filesize and filetype:
           ajaxRequest(ajaxtarget, "uploadedfile", ["filename="+f.name, "filesize="+f.size,
           "filetype="+f.type, "content="+e.target.result, "id="+curtarget]);
        };
     })(f);
    
     //start read operation for this file:
     reader.readAsDataURL(f);
     
  }
 
}

alert('initEventHandlers');
initEventHandlers();

</script>
 

 

 

 

[altagur]

I am autoanswering:

 

in tunihtmlframe need assign draggable

 

 

var grid = document.getElementById(Form.MainGrid.id);

  grid.draggable = true;
 

 

Really amazing possibility html5 dragdrop in unigui.

[Bresler]

Hi altagur, I'm interested too in drag and drop between two UniDBGrids, but I don't know where and how to start... Can you help me please??? Have you any example working?