Drag and delete DIV box and table entry

JavaScript
1

I have a group of div boxes containing records from the database.

I want to be able to drag and drop a div box and delete that specific record from the table.
So far I can successful do the drag and drop to make the div disappear but the record
delete is not working.

My goal is to get the value of “data-id1” which contains a code for the DB while Im dragging the DIV.

     <div id="all_reminders" runat="server">

     <div class="reminder_listitem" data-id1="DRW1L3" id="node1" draggable="true" 
       ondragstart="drag(event)"><b>DRW1L3</b> - Reminder1</div>

     <div class="reminder_listitem" data-id1="DRW1L5" id="node2" draggable="true" 
      ondragstart="drag(event)"><b>DRW1L5</b> - Reminder2</div>

    <div class="reminder_listitem" data-id1="DRW1L7" id="node3" draggable="true" 
     ondragstart="drag(event)"><b>DRW1L7</b> - Reminder3</div></div>

   function drop(ev){
         ev.preventDefault();
         var data = ev.dataTransfer.getData("Text");
         var el = document.getElementById(data);
         el.parentNode.removeChild(el);
         delete_reminder(lcode);
    }  

      document.ondrag = function(event) {
              lcode = $(this).attr("data-id1");  
              console.log(lcode);     ********************** THIS is returning UNDEFINED
        }; 

      function delete_reminder(lcode){
               $.ajax({  
                      url:"reminder_delete.php",  
                       method:"POST",  
                       data:{lcode:lcode},  
                       dataType:"text",  
                          success:function(data){  
                                   get_current_reminders(); 
                           }  
                           });  
                    }
2

The this keyword is just going to be the document, for that is what you have the event assigned to.

If you’re wanting to find the element that is being dragged, you need to access it via the event object instead.

event.target gives you the element, so you should use $(event.target) instead of $(this)

3

YES! thank you… thank you…thank you!! It works :smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.