简体   繁体   中英

Drag and drop custom data type into text boxes

I am working on a feature which utilizes HTML5 drag and drop capabilities. This feature only needs to work in Firefox, so I'm not worried about cross-browser capabilities. Here's the problem that I have encountered: I need to be able to drag my data only into the text and password fields on the page. If I use regular text/plain data type, it works fine, but it also allows for dragging of data into the search box, which is unacceptable, because some of the data that I'm dragging is sensitive (passwords). An alternative approach is to use a custom data type, but when I do this, my text and password fields stop accepting the drop. In a nutshell my code right now looks like this:

document.getElementById('#init').addEventListener('dragstart', function(e){
    e.dataTransfer.setData('text/link-uri', 'www.test.com');
    e.dataTransfer.setData('text/sensitive', e.target.dataset.value);
    e.dataTransfer.effectAllowed = 'copy';
});  
window.addEventListener('dragenter', function(e){
    if (e.target.type !== 'text' || e.target.type !== 'password') {
       e.preventDefault();
    }
});
window.addEventListener('dragover', function(e){
    if (e.target.type !== 'text' || e.target.type !== 'password') {
       e.preventDefault();
    }
});
window.addEventListener('drop', function(e){
    var data = e.dataTarnsfer.getData('text/sensitive');
    e.target.value = data;
});

Is there a workaround here? I somehow need to disallow the ability to drag into the searchbox. So, I need to either exclude the searchbox from the list of allowable targets with text/plain data type or make the text/password fields understand a new data type. Any pointers would be highly appreciated. Thanks! Luka

OK, some after some poking around I was able to overcome this issue. For anyone who is interested, I basically set the text/plain so some bogus data, and only used my custom data type in the drop handler. This way, for my forms, it would always use actual values, but when I would drag the value to the searchbox, it'd pick up the bogus data.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM