0

I am developing a drag-and-drop system for image files and I have noticed that the dragenter event is also executed on the selected text drag.

$(document).on("dragenter", "#element", function(event){
    event.preventDefault();

    // Check if we are dragging text

    if(is_text){ // <- HERE
        console.log("dragging text!");
    }else{
        console.log("dragging file!");
    }
});

I want to detect that the dragged object is not text, so the previous console.log would not run if it were.

UPDATE AND SOLUTION:

var dragging_text = false;

$(window).on("dragstart", function(event){
    dragging_text = true;
    console.log("dragstart");
});

$(document).on("dragenter", "#element", function(event){
    event.preventDefault();

    if(dragging_text){
        console.log("NO, dragging text!");
    }else{
        console.log("OK, dragging file!");
    }
});
Gabri
  • 121
  • 1
  • 10

2 Answers2

0

You need to check DataTransfer

$(document).on("dragenter", "#element", function(event){   
    if(event.dataTransfer.files.length > 0){ // <- HERE
        console.log("dragenter");
    }else {
        event.preventDefault();
    }
});
mooga
  • 3,136
  • 4
  • 23
  • 38
0

This will help you know:

 var dragging_text = false;

$(window).on("dragstart", function(event){
    dragging_text = true;
    console.log("dragstart");
});

$(document).on("dragenter", "#element", function(event){
    event.preventDefault();

    if(dragging_text){
        console.log("NO, dragging text!");
    }else{
        console.log("OK, dragging file!");
    }
    dragging_text = false;
});
Batsheva Hansav
  • 316
  • 2
  • 11
  • I've researched about `dragstart` and it seems to work fine. I update the post with my solution. – Gabri Mar 26 '19 at 10:18
  • Don't forget to add 'dragging_text = false;' in the dragenter() event, tell me if it works. – Batsheva Hansav Mar 26 '19 at 10:33
  • Thanks, I forgot to include `dragging_text = false;` in `dragenter` event. I've done tests and it seems to work fine. – Gabri Mar 26 '19 at 10:44