0

I am having a dilema on a html/js application I have been requestyed to handle drag'n'drop events in order to display a dropped image in a div if is not from images that are already displayed in my app then upload them as well.

My problem is how I will know if is an in-app image or not?

A sample code that describes the problem is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Drag'n'Drop demo</title>

        <style>
            #dropArea{
                min-width:50%;
                min-height:800px;
                background-color:#FF00BB;
                float: left;
            }

            #imgArea {
                min-width:49%;
                min-height:800px;
                background-color:#0F0FBB;
                float: right;
            }

            #imgArea img {
                display:block;
                margin:5px;
            }

        </style>
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"
         integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
         crossorigin="anonymous"></script>
        <script>
          var onDropCallback=function(event){
            event.preventDefault();
            var data = event.dataTransfer.getData("text/html");

            if(data){
               console.log("External Image Droped: ",  data); 
            } else {
                data = event.dataTransfer.getData("application/sample");
                console.log("In app droped: ", data);
            }

          }

          var dragSrart=function(event){
            // alert("DragStarted")
            console.log("Drag Started");
            var data = event.dataTransfer.getData("text/html");
            event.dataTransfer.clearData();
            event.dataTransfer.setData('application/sample',data);
          }

          var ondragoverCallback=function(event){
            event.preventDefault();
            var elem=event.target || event.srcElement;
            $(elem).css('border',"1px solid black");
          }

          var dragEndCallback=function(event){
            event.preventDefault();
            console.log("Drag End HAppened");
            $("#dropArea").css('border',"none");
          }

        </script>
    </head>
    <body>
        <div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
        <div id="imgArea">
            <img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif">
        </div>
    </body>
</html>

This above for the problem is that I use custom mime type. But is it a good idea I mean what problems may cause this approach?

Also I have thought an alternate approach of using html5's data- attributes on images eg data-app:

 <img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif" data-app>

So on drop I can check the html if has the correct data- attribute. But I am in delema which one is the best one. May I have some help?

-1

My problem is how I will know if is an in-app image or not?

Image comparison can be done by using the HTML5 Canvas to compare pixels. For example:

 function compareImages(img1, img2, pixelCount) {
   for (var i = 0; i < pixelCount; ++i) {
      if (img1.data[i] !== img2.data[i]) {
           return false;
        }
   }
   return true;
}

References

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.