Добрый день подскажите пожалуйста что делаю не так: Код (Javascript): let elem_ID = 'drop_zone_table'; let MyDropZone = document.getElementById(elem_ID); let hoverClassName = 'hover'; // Блокировка зоны дропа при перетаскивании // window.addEventListener(\"dragenter\", function(e) { console.log('e.target.id => '+e.target.id); if (e.target.id != elem_ID) { e.preventDefault(); e.dataTransfer.effectAllowed = 'none'; e.dataTransfer.dropEffect = 'none'; } else if (e.target.id != elem_ID && MyDropZone) { e.preventDefault(); MyDropZone.classList.add(hoverClassName); } }); window.addEventListener(\"dragover\", function(e) { if (e.target.id != elem_ID) { e.preventDefault(); e.dataTransfer.effectAllowed = 'none'; e.dataTransfer.dropEffect = 'none'; } else if (e.target.id != elem_ID && MyDropZone) { e.preventDefault(); MyDropZone.classList.add(hoverClassName); } }); window.addEventListener(\"drop\", function(e) { if (e.target.id != elem_ID) { e.preventDefault(); e.dataTransfer.effectAllowed = 'none'; e.dataTransfer.dropEffect = 'none'; } else if (e.target.id != elem_ID && MyDropZone) { e.preventDefault(); MyDropZone.classList.remove(hoverClassName); let div_message = 'insert_massage_upload'; $('#'+div_message).html(''); const files = Array.from(e.dataTransfer.files)[0]; let F_name = files['name']; var type_f = F_name.substr(F_name.lastIndexOf('.'),(F_name.length - F_name.lastIndexOf('.'))); var arr = ['.pdf','.PDF','.xls','.XLS','.xlsx','.XLSX','.docx','.DOCX','.doc','.DOC','.jpg','.JPG','.rar','.RAR']; if(jQuery.inArray(type_f, arr) == -1) { $('#'+div_message).html('Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar'); return false; } alert('полетели!'); } }); Суть в том что этот код должен разрешить перетаскивание и загрузку элемента только если его Drop-нуть в зоне элемента drop_zone_table Но пока все элементы полностью закрыты для Drop. Код HTML: HTML: <table id=\"drop_zone_table\" bgcolor=\"#ffffff\" border=1 cellpadding=3 cellspacing=0 wight=100%> <tr> <td align=\"center\"> <table border=0 cellpadding=0 cellspacing=1> <tr> <td colspan=2 align=\"center\"> <table border=0 cellpadding=0 cellspacing=0> <tr> <td> <form name=\"upload_form\" action=\"to do\" method=\"post\" enctype=\"multipart/form-data\"> <input type=\"file\" id=\"uploadfile1\" name=\"n_uploadfile1\" style=\"wight:460px;\"> </form> </td> </tr> <tr> <td align=\"center\" style=\"font-size:13px; padding: 10px 8px 10px 8px; color:#ff0000;\"> <div id=\"insert_massage_upload\"> </div> </td> </tr> </table> </td> </tr> <tr> <td align=\"left\"> <div id=\"Insert_foto\" onclick=\"something doing\" onMouseOver=\"this.style.color='#c41e3a'; this.style.textDecoration='underline';\" onMouseOut=\"this.style.color='#0000cc'; this.style.textDecoration='none';\" style=\"cursor:pointer; color:#0000cc; font-size: 14px;\">Добавить файл</div> </td> <td align=\"right\"> <div id=\"Exit_add_user_griad_button\" onclick=\"something doing\" onMouseOver=\"this.style.color='#c41e3a'; this.style.textDecoration='underline';\" onMouseOut=\"this.style.color='#0000cc'; this.style.textDecoration='none';\" style=\"cursor:pointer; color:#0000cc; font-size: 14px;\">Закрыть</div> </td> </tr> </table> </td> </tr> </table> Описание функционала я взял из: 1. Блокировка перетаскивания https://utyatnishna.ru/info/51992/p...g-and-dropped-file?ysclid=ltafjtqmoj761147123 2. Описание функционала загрузки файла https://habr.com/ru/articles/752268/
Добрый день! 1. Видимо, Вы забыли показать PHP код, в котором оператором echo выводится JS и HTML. Если же это не так, то необходимо убрать экранирование кавычек, иначе получите из JS -> Uncaught SyntaxError: invalid escape sequence 2. У Вас проблема в том, что Вы не определили все DOM-элементы. В HTML нет тэгов с атрибутами id: "drop_zone_table", "div_message" Вы некорректно определяете hoverClassName. Что-то напутано в СSS (:hover - псевдо класс, а не имя класса). 3. У Вас код на native JavaScript. Однако в нём есть и несколько строк на jQuery Код (Javascript): if(jQuery.inArray(type_f, arr) == -1) { $('#'+div_message).html('Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar'); return false; } из-за двух строк нет необходимости подключать jQuery, тоже на native JavaScript: Код (Javascript): //нужно добавить тэг <div id="div_message"></div> div_message = document.getElementById("div_message"); if(arr.includes(type_f)) { div_message.innerHTML = 'Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar'); return false; } можно изменить определение file extensions: Код (Javascript): //эту строку можно заменить var type_f = F_name.substr(F_name.lastIndexOf('.'),(F_name.length - F_name.lastIndexOf('.'))); //на эту var type_f = /[^.]+$/.exec(F_name); 4. Советую Вам убрать из HTML тэгов атрубуты style, onMouseOver, onMouseOut, все свойства определить в CSS и применить, где это необходимо псевдо класс :hover Так же желательно убрать из тэгов атрубуты onclick, заменив их на on.click() или addEventListener("click",...) в JS. Удачи!
Владимир, добрый день, спасибо за ответ. Я дорабатываю старый код, поэтому достаточно много странностей. Разобраться сложно. Я вышел из ситуации, сделав всплывающее окно, на котором в элементе Body стоит событие перехвата drop. Вроде работает. Все довольны, меня не трогают. Я не смог добиться чтобы закрыть drop на window или body, но при этом разрешить его на какой-то дочке. Если пришлёте DOM с JS который это позволит, я вам буду при-много благодарен.