Drag & Drop file upload

[jslarve]

If anyone has an idea, I'd appreciate it.

I am interested in creating a web page with a fixed sized grid. Such as 2x4, 4x4, and 8x4.

The user would need to be able to drag a file (or multiple files) to a particular square in the grid (or multiple squares if multiple files).

Dragging a file into a square would initiate file upload. The user would also need to be able to move the file to a different square afterward.

Is there an example I could make use of, or perhaps a commercial script library that can be of use for this?

Thank you.

[bshields]

Hi,

I've done drag and drop within NetTalk for reordering uploaded photos. I know thats not the same but the drag and drop that is supported within html is "usable".

A html element say DIV can have a "draggable" attribute, so the browser knows it can be dragged.

Then you also have events for "ondrop" and "ondragover". Its all done client side in javascript. Untill you know what you want tell the server to do, then I can do an ajax call to tell NetTalk what needs to change in my database and if necessary refresh the div/divs.

I do have trouble with NetTalk 10 and multiple upload drop "destinations" on a popup window, not sure if thats me, NT10 and whether NT11 may have the same issue.

Its totally do-able, but it will take some work.

I've attached a picture and some of the html to give you a clue.

   <td>
      <div id="draggable_001" class="movable_img" ondrop="drop(event,1)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114436.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,1)" src="https://titan.inhabit.com.au/thumbs/65/0003114436.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_002" class="movable_img" ondrop="drop(event,2)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114448.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,2)" src="https://titan.inhabit.com.au/thumbs/65/0003114448.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_003" class="movable_img" ondrop="drop(event,3)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114446.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,3)" src="https://titan.inhabit.com.au/thumbs/65/0003114446.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_004" class="movable_img" ondrop="drop(event,4)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114449.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,4)" src="https://titan.inhabit.com.au/thumbs/65/0003114449.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_bin" ondrop="drop(event,-1)" ondragover="allowDrop(event)">
         <img draggable="false" src="https://titan.inhabit.com.au/_ui/rsc/trash-can.png" width="100" height="75" alt="" border="0">
      </div>
   </td>


<script>
function drop(e,idx) {
  e.preventDefault();
  var data=e.dataTransfer.getData("Text");
  if (data=="killfp1") {
    sv('','listingtable_listingtablew','','_refresh_=current','killfp1=65,'+idx+',519386','_parentproc_=listingtablew');
  } else if (data=="killfp2") {
    sv('','listingtable_listingtablew','','_refresh_=current','killfp2=65,'+idx+',519386','_parentproc_=listingtablew');
  } else if (idx==-1) {
    sv('','listingtable_listingtablew','','_refresh_=current','delete='+data+',519386','_parentproc_=listingtablew');
  } else {
    sv('','listingtable_listingtablew','','_refresh_=current','move='+data+','+idx+',519386','_parentproc_=listingtablew');
  }
}

function drag(e,idx) {
  e.dataTransfer.setData("Text",idx);
}

function allowDrop(e) {
  e.preventDefault();
}

function handleDragEnter(e) {
  this.className = 'over';
  return false;
}

function handleDragLeave(e) {
  this.className = '';
  return false;
}
</script>


Regards
Bill

[jslarve]

Thanks a whole lot Bill.  I appreciate it.

Hi,

I've done drag and drop within NetTalk for reordering uploaded photos. I know thats not the same but the drag and drop that is supported within html is "usable".

A html element say DIV can have a "draggable" attribute, so the browser knows it can be dragged.

Then you also have events for "ondrop" and "ondragover". Its all done client side in javascript. Untill you know what you want tell the server to do, then I can do an ajax call to tell NetTalk what needs to change in my database and if necessary refresh the div/divs.

I do have trouble with NetTalk 10 and multiple upload drop "destinations" on a popup window, not sure if thats me, NT10 and whether NT11 may have the same issue.

Its totally do-able, but it will take some work.

I've attached a picture and some of the html to give you a clue.

   <td>
      <div id="draggable_001" class="movable_img" ondrop="drop(event,1)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114436.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,1)" src="https://titan.inhabit.com.au/thumbs/65/0003114436.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_002" class="movable_img" ondrop="drop(event,2)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114448.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,2)" src="https://titan.inhabit.com.au/thumbs/65/0003114448.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_003" class="movable_img" ondrop="drop(event,3)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114446.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,3)" src="https://titan.inhabit.com.au/thumbs/65/0003114446.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_004" class="movable_img" ondrop="drop(event,4)" ondragover="allowDrop(event)">
         <a href="https://titan.inhabit.com.au/images/65/0003114449.JPG?s=0" target="_blank">
            <img draggable="true" ondragstart="drag(event,4)" src="https://titan.inhabit.com.au/thumbs/65/0003114449.JPG?s=0" width="100" alt="" border="0">
         </a>
      </div>
   </td>
   <td>
      <div id="draggable_bin" ondrop="drop(event,-1)" ondragover="allowDrop(event)">
         <img draggable="false" src="https://titan.inhabit.com.au/_ui/rsc/trash-can.png" width="100" height="75" alt="" border="0">
      </div>
   </td>


<script>
function drop(e,idx) {
  e.preventDefault();
  var data=e.dataTransfer.getData("Text");
  if (data=="killfp1") {
    sv('','listingtable_listingtablew','','_refresh_=current','killfp1=65,'+idx+',519386','_parentproc_=listingtablew');
  } else if (data=="killfp2") {
    sv('','listingtable_listingtablew','','_refresh_=current','killfp2=65,'+idx+',519386','_parentproc_=listingtablew');
  } else if (idx==-1) {
    sv('','listingtable_listingtablew','','_refresh_=current','delete='+data+',519386','_parentproc_=listingtablew');
  } else {
    sv('','listingtable_listingtablew','','_refresh_=current','move='+data+','+idx+',519386','_parentproc_=listingtablew');
  }
}

function drag(e,idx) {
  e.dataTransfer.setData("Text",idx);
}

function allowDrop(e) {
  e.preventDefault();
}

function handleDragEnter(e) {
  this.className = 'over';
  return false;
}

function handleDragLeave(e) {
  this.className = '';
  return false;
}
</script>


Regards
Bill