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

Проблема с перетаскиванием HTML5

1 голос
/ 17 мая 2011

Я немного новичок в javascript / веб-программировании, и у меня возникли некоторые проблемы, которые, вероятно, должны иметь простые решения, но с которыми у меня очень много проблем.Я просто хочу перетащить текст из ячейки одной таблицы в ячейку другой таблицы.У меня следующие вопросы:

Кажется, я не могу ничего сделать, кроме перетаскивания ссылок (href).Если я попытаюсь установить параметр draggable = true для div, он останется нерасторжимым (в Firefox).В своих поисках я не видел каких-либо исправлений для Firefox (однако я добавил правила CSS для WebKit).

Чтобы обойти это, я пытался перетащить (href) -ологию дляв скобках есть ограничение на количество тегов ссылки, которые я могу использовать - элемент из ячейки одной таблицы в поле ввода текста в ячейке другой таблицы, и его действие по умолчанию - просто перетащить ссылку.То, что я хотел бы перетащить, было бы содержанием тега (например, для некоторого текста я бы хотел, чтобы он возвращал «некоторый текст» или «перетаскиваемый» или любой другой настраиваемый текст).Я попытался обработать это в событиях ondragstart / ondrop через e.datatransfer.setData («Текст», «Мой пользовательский текст») и e.datatransfer.getData («Текст»), однако я все еще получаю те же результаты.Есть ли у кого-нибудь предложения по этому поводу?Я смотрю на это некоторое время и не могу понять это вообще.Заранее большое спасибо за вашу помощь.

РЕДАКТИРОВАТЬ: У меня нет доступа к компьютеру, который я использовал atm, но я попытаюсь понять суть того, что я делал через .. 

onDrop(e){ //onDrop is assigned to the drophandler of a text input field
    var text = e.dataTransfer.getData('Text');
    this.Text = text;
    e.preventDefault();
} 
onDragOver(e){
    e.preventDefault();
}
onDragStart(e){
    e.dataTransfer.setData('Text', 'My String');
}
....
<table>
  <tr>
    <td><a id="ident" href="#" draggable="true">Text Content</a></td>
  </tr>
<table>

<table>
  <tr>
    <td><input ondrop="onDrop(e)" type="text" /></td>
  </tr>
<table>

1 Ответ

8 голосов
/ 19 мая 2011

Вот полный пример кода, который я сделал, который работает на основе вашего скелета выше: 

<html>
    <head>
        <title>drag and drop example</title>
        <script type="text/javascript">
            function onDrop(e){ 
                e.preventDefault();
                var text = e.dataTransfer.getData("text/plain");
                var input = document.getElementById("destination");
                input.value = text;
            }

            function onDragOver(e){
                e.preventDefault();
            }

            function onDragStart(e){
                e.dataTransfer.setData("text/plain", event.target.textContent);

            }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <span id="ident" draggable="true" ondragstart="onDragStart(event)">Text Content</span>
                </td>
            </tr>
            <table>
                <table>
                    <tr>
                        <td>
                            <input id="destination" ondragover="onDragOver(event)" ondrop="onDrop(event)" type="text" />
                        </td>
                    </tr>
                    <table>
                    </body>
                </html>

Несколько замечаний:

  • Формат, который вы передаете в setData и getDataдолжен быть «text / plain», а не «Text» (см .: http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-getdata)
  • Вам нужно было вызвать OnDragOver и OnDragStart (возможно, это просто отсутствовало в образце, который вы добавили из памяти)
  • Было бы неплохо дать вашему входному элементу идентификатор, как я и сделал, чтобы вы могли изменить значение на перетаскиваемый элемент
  • Чтобы узнать больше об этой теме, я написал блог, который вам может пригодиться: Доска планирования перетаскивания с HTML5
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...