CODEWITHSUNDEEP
javascripthtmljquerycss
Mark
Mark

Reputation: 81

Generic JQuery for multiple html elements

Thanks for reading. I am developing a code to submit images based on the html element (box) into which they are dropped. I have a nice jQuery drag and drop routine that works acceptably on it's own. However, I am unsure how to extend it so that the JQuery works for multiple html elements. First up is the JQuery code:

<script>
function sendFileToServer(formData)
{
    var jqXHR=$.ajax({
    type: "POST",
    cache: false,
    processData: false,
    contentType:false,
    data: formData,
    url: "upload.php",
    
    error: function (jqXhr, textStatus, errorMessage) {
            $('#status'<?php echo $tag_no?>).append('Error' + errorMessage);
    }
    
    }); 
 
}


function handleFileUpload(files,obj)
{
   for (var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('upl[]', files[i]);

        sendFileToServer(fd);
 
   }
}
$(document).ready(function()
{
var obj = $("@dragandrophandler");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
     handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{
  e.stopPropagation();
  e.preventDefault();
  obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
 
});

</script>

Midway down, under $(document).ready(function(), is the call to @dragandrophandler. This uniquely associates with the html id=draganddrophandler. However, I want to extend it to work for many html elements (..1, ..2, ..3, etc), like this:

<div id="dragandrophandler1" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

<div id="dragandrophandler2" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

<div id="dragandrophandler3" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

In this way, I can tag the images for which box they were dropped in and route them accordingly on the backend.

So to summarize, whats the best way to create the either html or more likely the JQuery so it can work on all of the relevant html elements?

Upvotes: 0

Views: 80

Answers (1)

imvain2
imvain2

Reputation: 15857

You should be able to wrap the code in each and base it on the class. You will notice that I set obj = $(this), I did that to help you visually separate the outer $(this) to the this of the event handlers.

$(".dragandrophandler").each(function(){
    var obj = $(this);

    obj.on('dragenter', function (e) 
    {
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e) 
    {
         e.stopPropagation();
         e.preventDefault();
    });
    obj.on('drop', function (e) 
    {
     
         $(this).css('border', '2px dotted #0B85A1');
         e.preventDefault();
         var files = e.originalEvent.dataTransfer.files;
     
         //We need to send dropped files to Server
         handleFileUpload(files,obj);
    });
    });

Upvotes: 1

Related Questions