Пример перетаскивания - HTML5 - PullRequest
Новая
       14

Пример перетаскивания - HTML5

0 голосов
/ 08 ноября 2011

Я пытаюсь узнать пример перетаскивания из WWWC ( здесь ), и я могу получить элементы списка, которые будут удалены из исходного списка при перетаскивании, но не отображаются в новом список. Есть идеи почему бы и нет? Я пробовал на Safari 5.1.1, Chrome 15 и Firefox 7.0.1. 

    <head>
        <title>Drag 'N Drop</title>
    </head>

    <p>What fruits do you like?</p>
    <ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">    
     <li draggable="true" data-value="fruit-apple">Apples</li>
     <li draggable="true" data-value="fruit-orange">Oranges</li>
     <li draggable="true" data-value="fruit-pear">Pears</li>
    </ol>
    <script>
      var internalDNDType = 'text/plain'; // set this to something specific to your site
      function dragStartHandler(event) {
        if (event.target instanceof HTMLLIElement) {
          // use the element's data-value="" attribute as the value to be moving:
          event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
          event.dataTransfer.effectAllowed = 'move'; // only allow moves
        } else {
          event.preventDefault(); // don't allow selection to be dragged
        }
      }
      function dragEndHandler(event) {
        // remove the dragged element
        event.target.parentNode.removeChild(event.target);

      }
    </script>

    <p>Drop your favorite fruits below:</p>
    <div dropzone="move s:text/plain" ondrop="dropHandler(event)">
        <ol dropzone="move s:text/plain" ondrop="dropHandler(event)">
         <!-- don't forget to change the "text/x-example" type to something
         specific to your site -->
            <li>Bananas</li>
        </ol>
        </br>
        </br>
        </br>
    </div>
    <script>
      var internalDNDType = 'text/plain'; // set this to something specific to your site
      function dropHandler(event) {
        var li = document.createElement('li');
        var data = event.dataTransfer.getData(internalDNDType);
        if (data == 'fruit-apple') {
          li.textContent = 'Apples';
        } else if (data == 'fruit-orange') {
          li.textContent = 'Oranges';
        } else if (data == 'fruit-pear') {
          li.textContent = 'Pears';
        } else {
          li.textContent = 'Unknown Fruit';
        }
        event.target.appendChild(li);
      }
    </script>

Ответы [ 2 ]

2 голосов
/ 08 ноября 2011

Есть пара вопросов. Во-первых, ваша дропзона должна отменить событие при перетаскивании: 

<ol dropzone="move s:text/plain" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">

function dragOverHandler(event) {
    event.preventDefault();
    return false;
}

Во-вторых, ваша функция-обработчик dropHandler будет запущена несколько раз, потому что цель отбрасывания в большинстве случаев будет элементом li, а не ol (и, возможно, также div, но я проигнорировал этот элемент). Поэтому добавьте код для обработки события только в ol или отмените событие в dropHandler с помощью stopPropagation.

Наконец, действие по умолчанию (по крайней мере в Firefox, не проверяющее другие браузеры) при удалении элемента - попытаться перейти к URL-адресу, представленному значением text/plain, поэтому вам следует добавить немного event.preventDefault() в вероятных местах. Вот обновленная функция dropHandler: 

function dropHandler(event) {
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'fruit-apple') {
      li.textContent = 'Apples';
    } else if (data == 'fruit-orange') {
      li.textContent = 'Oranges';
    } else if (data == 'fruit-pear') {
      li.textContent = 'Pears';
    } else {
      li.textContent = 'Unknown Fruit';
    }
    event.target.appendChild(li);
    event.stopPropagation();
    event.preventDefault();
    return false;
}

Вот моя обновленная версия .

0 голосов
/ 09 ноября 2011

Коротким ответом будет то, что вам также нужно добавить драговер-слушателя в область отбрасывания, чтобы разрешить действие сброса. 

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';

  return false;
}

У вас есть подробное объяснение в этом пошаговом руководстве (хотя элементы этого руководства действуют как перетаскиваемые элементы и области перетаскивания)

Однако, Крис, насколько я рад, что вы экспериментируете с нативной функцией перетаскивания HTML5, примите мое скромное мнение, когда я скажу, что в вашем коде слишком много серьезных ошибок как на уровне разметки, так и на уровне Javascript. то есть отсутствующие теги, закрывающие теги, которые не существуют, неправильные пространства имен атрибутов, повторяющиеся прослушиватели в цепочечных элементах, повторяющиеся переменные в одной и той же области видимости и т. д. Я бы посоветовал сначала пройти несколько проверок кода.

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

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

...