IE setData перетаскивать - PullRequest
       4

IE setData перетаскивать

0 голосов
/ 12 марта 2019

Я любитель, использующий WAMP для создания сайта.Не слишком опытный с любым из этого.Я просто использую стандартные примеры W3school:

dragstart(ev){
ev.dataTransfer.setData("text/plain", ev.currentTarget.id);}

(тоже пробовал 'text' и ev.target.id)

dropped(ev){ alert('card_id- ' + ev.dataTransfer.getData("Text")); return true;)}

на этом объекте:

<div class='my_draggable' id='1717' draggable='true' ondragstart='dragstart(event)'>
<a href='https://www.yahoo.com'>
  <div id='row_1'></div><div id='row_2'></div>
</a></div>

Для любого другого браузера предупреждение:

'card_id- '1717'

Предупреждение IE:
'card_id- 'https://www.yahoo.com'

Чем отличается метод IE для setData?Мне нужно, чтобы IE вел себя так же, как и другие браузеры.

Deepek

Вот ваш код, модифицированный для воспроизведения того, что я делаю.

   <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .droptarget {
      float: left; 
      width: 100px; 
      height: 35px;
      margin: 15px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }

    a {
      color: inherit;
      text-decoration: none;
      width: 100%;
    }
    </style>
    </head>
    <body>

    <p>Drag the p element back and forth between the two rectangles:</p>

    <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">

    </div>
      <div ondragstart="dragStart(event)" draggable="true" id="1717">
         <a href='https://www.yahoo.com'>
         <div id='row_1'>drag</div>
         <div id='row_2'>me</div>
         <div id='row_3'>please</div>
         </a>
      </div>
    </div>


    <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>

    <p style="clear:both;">
    <strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions
                 or Safari 5.1 and earlier versions.</p>

    <p id="demo"></p>

    <script>
    function dragStart(event) {
      event.dataTransfer.setData("Text", event.target.id);
      document.getElementById("demo").innerHTML = "Started to drag the p element";
    }

    function allowDrop(event) {
      event.preventDefault();
    }

    function drop(event) {
      event.preventDefault();
      var data = event.dataTransfer.getData("Text");

  alert('card_id- ' + event.dataTransfer.getData("Text"));
}
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Это будет работать:

dragstart(ev){
 ev.dataTransfer.setData("text", ev.target.id);
}
dropped(ev){ 
 alert('card_id- ' + ev.dataTransfer.getData("text"));
 return true;
}
0 голосов
/ 13 марта 2019

Вы можете попробовать сослаться на этот модифицированный пример кода.Это дает аналогичный результат в IE и других браузерах.

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="1717">Drag me!
  <a href='https://www.yahoo.com'>
  <div id='row_1'></div><div id='row_2'></div>
</a></div>
  </p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

<p id="demo"></p>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  document.getElementById("demo").innerHTML = "Started to drag the p element";
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
  alert('card_id- ' + event.dataTransfer.getData("Text"));
}
</script>

</body>
</html>

Вывод в IE 11:

enter image description here

Ссылка:

(1) DataTransfer.getData ()

(2) DataTransfer.setData ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...