HTML перетаскивание из одного div в другой - PullRequest
Новая
       4

HTML перетаскивание из одного div в другой

0 голосов
/ 27 августа 2018 
<script>function allowDrop(ev) {
ev.preventDefault();}function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);}    function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));}</script>

сценарий выше, добавьте! DOCTYPE HTML стиль заголовка HTML между заголовком. Тело ниже 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag1" class="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Aa</div>

Это правильный способ реализации перетаскивания?

1 Ответ

0 голосов
/ 27 августа 2018

создайте тег span, скопируйте inner text и используйте его. Пожалуйста, посмотрите на фрагмент кода. 

#div1 { 
    border: 1px solid blue;
    width: 100px;
    height: 100px;
    display: inline-box;
    overflow-wrap: break-word;
}

#drag1 { 
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: inline-box;
  overflow-wrap: break-word;
}
<body>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag1" class="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Aa</div>


<script>

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

function drag(ev) 
{
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var copyTxt = document.createElement("span");
    var original = document.getElementById(data);
    var text = original.textContent || original.innerText;
    copyTxt.innerText =  text;
    ev.target.appendChild(copyTxt);
}
</script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...