Jump to content

Draggable Items affecting other Parts of the Page.


jamfitz001

Recommended Posts

I am not using a framework.  I am not an overly experienced WAMP programmer.   I am working on a personal project.

I have a DIV ID='contents'  and on page load, there is an js function that does an AJAX call to PHP/MYSQL and this echoes a set of DIVs,  class='members'  ID=$member_id,   that are  returned as innerHTML of Div ID='contents' .  These members DIVs are all draggable. 

Outside of DIV ID='contents'  is a Div that is a dropzone.  The dropzone onDrop runs a javascript function that does an AJAX call to a different PHP/MYSQL page.   When I drag a member and drop it on the dropzone,  the list of member DIVs disappears from the web page.  ( Div ID='contents' innerHTML is empty)   The Drop function is not meant to affect the innerHTML of Div ID='contents' ,  it simply returns a message to the dropzone's innerHTML. 

Why does the drop impact the 'contents' DIV at all?  How can I prevent this from happening?    (The drag and drop functions are all examples off of W3school tutorials..nothing fancy).   

   function Func_card_dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

   function allow_drop_dropzone(ev)

{  ev.preventDefault();}

  function func_dropped_dropzone (ev) {
   ev.preventDefault();

   var member_id = ev.dataTransfer.getData("text");
  if (document.getElementById('show_loc').checked )   {request_type = 'A';} else {request_type = 'D';}
  request_key = document.getElementById('mbr_id').value;

 // Setup the AJAX call
   var url= 'process_mbr.php';var rnd982g = Math.random();
   var passvars = '?card_id=' + member_id
               + '&mbr_id='   + request_key
               + '&r_type='   + request_type
               + '&rnd982g='  + rnd982g;

 if(vbcReq.readyState == 4 || vbcReq.readyState == 0)
     {
    vbcReq.open('GET',url + passvars,'true');
    vbcReq.onreadystatechange = member_updated;
    vbcReq.send(null);
     }  

  return true;
}

 function member_updated()
 {
 document.getElementById('d400_d').innerHTML = vbcReq.responseText;
 return true;

 }

This the first question I've asked...so hope that I have been clear and followed protocols.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.