Set multiple data on dataTransfer.setData

Question

It's possible to set multiple using dataTransfer?

HTML

<tr class="notfirst"
    draggable="true"
    ondragstart="drag(event, '@Model.getFormat(item)', '@Model.getColor(item)')"
    ondragover="allowDrop(event)"
>

JS

function drag(ev, format, color) {
    ev.dataTransfer.setData("text", format);
    ev.dataTransfer.setData("text", color); 
}

I can correctly pass format and color to my JS function but I cant add both to dataTransfer because color replaces format. I tried also to pass an object but didn't work either.

Answer 1

You may push your data to a JSON object, then convert this object to a string with JSON.stringify(). After that you will be able to pass the whole string to setData.

   let  obj = {prd_iId: 50 ,prd_sName: 'Ray Ban'};
   obj = {...obj, prd_sModel:'Aviator'};     
   e.dataTransfer.setData("text/plain", JSON.stringify(obj));

That will do what you want.

Answer 2

possible to set multiple using dataTransfer?

Yes.

If you don't want to serialize data you can simply set your data with different format arguments:

  ev.dataTransfer.setData('formatText', format);
  ev.dataTransfer.setData('colorText', color); 

get data like this

  const format = ev.dataTransfer.getData('formatText');
  const color  = ev.dataTransfer.getData('colorText');