Как использовать.setData/.getData при использовании.trigger('dragstart') в jQuery для функции перетаскивания в HTML5

При использовании.trigger ('dragstart') в jQuery для запуска функции элемента с атрибутом ondragstart="drag(event)", как вам.setData/.getData для перетаскивания HTML5 на сенсорном устройстве?**

Пример потока:

  • Пользователь перетаскивает элемент с событием touchmove
  • Элемент двух следующих атрибутов:
    • .bind ('touchmove', function (event) {$ (this).trigger ('dragstart');});
    • ondragstart = "перетаскивание (событие)"
  • перетаскивание (событие) пытается использовать event.dataTransfer.setData("Текст", event.target.id);
  • Результатом является следующая ошибка.
  • "Uncaught TypeError: Невозможно прочитать свойство 'setData' из неопределенного"

Для события мыши ondragstart прекрасно работает вызов.setData/.getData в функции перетаскивания (событие). Однако при запуске ondragstart с помощью.trigger () методы.setData/.getData не работают должным образом, и возвращается ошибка

Почему я получаю следующую ошибку при попытке перетащить заказ; и как мне это исправить?**

"Uncaught TypeError: Невозможно прочитать свойство 'setData' из неопределенного"

Пожалуйста, воздержитесь от использования библиотеки.js, такой как TouchPunch и т. Д.

Я пытаюсь связать событие "touchmove", чтобы отключить перетаскивание (событие) и предоставить ту же функциональность.setData/.getData, которая доступна для события, инициируемого перетаскиванием мышью.

---> Ссылка jsFiddle <---

HTML:

<div class="l-col-container">
    <section id="1130" class="orderqueue">
         <h1>Order Queue</h1>

        <div class="orderList">
            <div id="100" class="order" timeslot="1130" ordernumber="100" draggable="true" ondragstart="drag(event)">
                <div class="order-name">Johnny Cash</div>
                <div class="order-num">Order Number: 100</div>
            </div>
            <!-- /order -->
            <div id="101" class="order" timeslot="1130" ordernumber="101" draggable="true" ondragstart="drag(event);">
                <div class="order-num">101</div>
                <div class="order-name">Johnny Cash</div>
            </div>
            <!-- /order -->
        </div>
        <!-- /orderlist -->
    </section>
    <div class="queuebar">
         <h2>Queue Bar</h2>

        <hr/>
        <div class="queuebar-dropzone"></div>
    </div>
    <div id="testsensor">
         <h2>Test Log</h2>

        <p id="testsensor-output"></p>
    </div>
</div>
<!-- /l-col-container -->

JavaScript:

var orders = $('.order');
var testelement = document.getElementById('testsensor-output');
var index = 0;
orders.each(function () {
    $(this).bind('touchmove', function (evt) {
        index++;
        testelement.innerHTML = index + ' dragstart fired';
        console.log('dragstart fired');
        $(this).trigger('dragstart');
    });
    $(this).bind('dragstart', function(event){
        drag(event);
    });
});

function drag(ev) {
    console.log(ev);
    var obj = $('#' + ev.target.id);
    ev.dataTransfer.setData("Text", ev.target.id);
    var data = ev.dataTransfer.getData("Text");
}
Источник

3 ответа

Решение

См. Jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() не работает

с использованием event.originalEvent.dataTransfer делает трюк

Источник

Попробуй это

HTML

<div id="draggable" ></div>

CSS

#draggable {width:50px;height:50px;background-color:#f00;position:absolute}

HTML5 Touch Event Handlers

var draggable = document.getElementById('draggable');
     draggable.addEventListener('touchmove', function(event) {
     var touch = event.targetTouches[0];

      // Place element where the finger is
     draggable.style.left = touch.pageX-25 + 'px';
     draggable.style.top = touch.pageY-25 + 'px';
     event.preventDefault();
 }, false);

Спасибо

Источник

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

Я могу ошибаться, но для тех, кто пытается сделать то же самое... Я предлагаю найти другой метод. Я лично переписал код, чтобы полностью удалить HTML5 перетаскивание из смеси. Это была несчастливая дорога.:D

Источник
Другие вопросы по тегам