Disable the drag-and-drop for text

Question

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!");
    }
});

just not understand what you mean by text, you can not drag and drop text ! — mooga, Mar 25 '19 at 16:39
@mooga The `dragenter` event fires when you select and drag text. I want to avoid it. — Gabri, Mar 25 '19 at 16:41

mooga · Answer 1 · 2019-03-25T16:59:47.653

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();
    }
});

edited Mar 25 '19 at 16:59

answered Mar 25 '19 at 16:41

mooga

3,136
4
23
38

I have updated the question to see if it is better understood now. – Gabri Mar 25 '19 at 16:48
have used `if(event.dataTransfer.files.length > 0){` ? – mooga Mar 25 '19 at 16:52
Yes, but with that line it does not let me drag files. – Gabri Mar 25 '19 at 16:56
because you block it anyway, i have changed the code , try it – mooga Mar 25 '19 at 17:00
`dataTransfer` works in the `dragenter` event? I have documented and I have seen that it does not work. – Gabri Mar 25 '19 at 17:05
I think the problem is that – Gabri Mar 25 '19 at 17:05
@Smark what exactly you mean by text drag and drop ? can you add an example – mooga Mar 25 '19 at 18:03
When you select text with the cursor, you click on it and drag it over `#element`. I want to avoid that the `dragenter` event is executed in these cases. – Gabri Mar 25 '19 at 18:48
@Smark you can't avoid it's execution but you can block it – mooga Mar 25 '19 at 21:07
And how can I detect that the object I am dragging is text or a file? – Gabri Mar 26 '19 at 08:25
by using that `if(event.dataTransfer.files.length > 0)` , check the my answer again – mooga Mar 26 '19 at 08:41
I'm sorry, this does not work for me. Check https://stackoverflow.com/questions/34771177/detect-file-type-on-dragenter-cross-browser-solution and https://stackoverflow.com/questions/8762635/getting-the-filename-during-the-dragenter-event – Gabri Mar 26 '19 at 08:44

Batsheva Hansav · Accepted Answer · 2019-03-26T10:32:40.343

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;
});

edited Mar 26 '19 at 10:32

answered Mar 26 '19 at 09:43

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

Disable the drag-and-drop for text

2 Answers2