Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.02.2021, 17:03
Интересующийся
Отправить личное сообщение для rita Посмотреть профиль Найти все сообщения от rita
 
Регистрация: 01.06.2020
Сообщений: 22

Drag and drop in Internet Explorer
Как сделать, чтобы код работал в Internet Explorer?
В других браузерах работает.
Можно ли как то сократить код?

<style>
#div1,#div2 {
    width:100px;
    height:50px;
    padding:10px;
	background-color:yellow;
	    display: inline-table;
		font-size:2rem;
}
#div2 {
background-color:pink;
}
</style>
<div id="div1" ondrop="drag1(event)" ondragover="allowDrop(event)">
    <div id="box1" draggable="true" ondragstart="drag1(event)" >первый
	</div>
</div>
<div id="div2" ondrop="drag2(event)" ondragover="allowDrop(event)">
    <span id="box2" draggable="true"  ondragstart="drag2(event)">второй
	</span>
</div>
<div id="div1" class="drag1" ondrop="drop1(event)" ondragover="allowDrop(event)">I
</div>
<div id="div2" class="drag2" ondrop="drop2(event)" ondragover="allowDrop(event)">II
</div>
<script>
function allowDrop(allowdropevent) {
    allowdropevent.target.style.color = 'blue';
    allowdropevent.preventDefault();
}
function drag1(dragevent) {
    dragevent.dataTransfer.setData("text1", dragevent.target.id);
}
function drag2(dragevent) {
    dragevent.dataTransfer.setData("text2", dragevent.target.id);
}
function drop1(dropevent) {
    dropevent.preventDefault();
    var data1 = dropevent.dataTransfer.getData("text1");
	var data2 = dropevent.dataTransfer.getData("text2");
if ((dropevent.dataTransfer.getData("text1"))&& (event.target.className == "drag1"))
	{dropevent.target.appendChild(document.getElementById(data1));
}}
function drop2(dropevent) {
    dropevent.preventDefault();
    var data1 = dropevent.dataTransfer.getData("text");
	 var data2 = dropevent.dataTransfer.getData("text2");
if ((dropevent.dataTransfer.getData("text2"))&& (event.target.className == "drag2"))
	{dropevent.target.appendChild(document.getElementById(data2));
}}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 01.02.2021, 18:03
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Элементы должны иметь уникальные id.
Иначе браузер не всегда понимает, какой из них надо брать.
Для начала исправьте это.
Ответить с цитированием
  #3 (permalink)  
Старый 01.02.2021, 18:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от rita
Как сделать, чтобы код работал в Internet Explorer?
искать полифил для setData, если такой есть конечно.
Ответить с цитированием
  #4 (permalink)  
Старый 01.02.2021, 21:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Сообщение от рони
искать полифил для setData, если такой есть конечно.
Мне кажется, что в ИЕ 10-11 dataTransfer.setData есть.
Но ограничивается только текстом. И задавать надо так
dataTransfer.setData("text", "строка")

Проверить не могу, ИЕ нет.
Ответить с цитированием
  #5 (permalink)  
Старый 01.02.2021, 21:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от voraa
Мне кажется, что в ИЕ 10-11 dataTransfer.setData есть.
метод есть, но похоже не рабочий.
https://developer.mozilla.org/en-US/..._compatibility
Ответить с цитированием
  #6 (permalink)  
Старый 01.02.2021, 22:56
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Нашел какой то ИЕ (выглядит как ИЕ, но не говорит, какой он)
По крайней мере всякие модули ES-6 он не понимает.
В нем это работает
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
#div1,#div2, #div11, #div22 {
    width:100px;
    height:50px;
    padding:10px;
    background-color:yellow;
        display: inline-table;
        font-size:2rem;
}
#div2 {
background-color:pink;
}
</style>
</head>

<body id="body"  >

<div id="div1" ondrop="drag1(event)" ondragover="allowDrop(event)">
    <div id="box1" draggable="true" ondragstart="drag1(event)" >первый
    </div>
</div>
<div id="div2" ondrop="drag2(event)" ondragover="allowDrop(event)">
    <span id="box2" draggable="true"  ondragstart="drag2(event)">второй
    </span>
</div>
<div id="div11" class="drag1" ondrop="drop1(event)" ondragover="allowDrop(event)">I
</div>
<div id="div22" class="drag2" ondrop="drop2(event)" ondragover="allowDrop(event)">II
</div>
<script>
function allowDrop(allowdropevent) {
    allowdropevent.target.style.color = 'blue';
   allowdropevent.preventDefault();
}
function drag1(dragevent) {
    dragevent.dataTransfer.setData("text", dragevent.target.id);
}
function drag2(dragevent) {
    dragevent.dataTransfer.setData("text", dragevent.target.id);
}
function drop1(dropevent) {
    dropevent.preventDefault();
    var data = dropevent.dataTransfer.getData("text");
if (data && event.target.className == "drag1")
    {dropevent.target.appendChild(document.getElementById(data));
}}
function drop2(dropevent) {
    dropevent.preventDefault();
     var data = dropevent.dataTransfer.getData("text");
if (data && event.target.className == "drag2")
    {dropevent.target.appendChild(document.getElementById(data));
}}
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оборачивать каждый звгружаемый файл drag and drop в свой собственный div Kurt_D_Cobain jQuery 21 29.01.2020 20:46
Криво работает drag & drop Dark Souls jQuery 6 06.03.2017 22:32
ищу Drag & drop плагин для построения плана помещения Den Brown Элементы интерфейса 0 31.07.2015 19:23
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01