当使用jQuery的.trigger（'dragstart'）进行HTML5的拖放功能时，如何使用.setData / .getData [英] How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag and drop functionality

问题描述

• 用户拖动元素与touchmove事件


• 元素包含以下两个属性：
  
  
  
  • .bind（'touchmove'，function（event）{$这个）.trigger（'dragstart'）;}）;
  
  
  • ondragstart =drag（event）
  
  

  对于鼠标事件ondragstart， .setData / .getData调用在drag（event）函数中可以正常工作。但是，当通过.trigger（）触发ondragstart时，.setData / .getData方法无法正常工作，并返回错误

  For mouse event ondragstart, .setData/.getData call in the drag(event) function works fine. However, when firing the ondragstart via .trigger() the .setData/.getData methods do not work properly and an error is returned

  
  

  未捕获TypeError：无法读取未定义的属性setData

  "Uncaught TypeError: Cannot read property 'setData' of undefined"

  请不要指示使用.js库，例如TouchPunch等。

  我试图绑定touchmove事件以触发拖动（事件），并提供与鼠标拖动触发事件相同的.setData / .getData功能。

  I'm trying to bind the 'touchmove' event to fire off the drag(event) and provide the same .setData/.getData functionality that is available for the mouse drag triggered event.

  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：

  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");
  }
  

  
  

  推荐答案

  请参阅 jquery html 5 dragstart .on（'dragstart'，function（e）{}）e .dataTransfer.setData（）不起作用

  See jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work

  使用 event.originalEvent.dataTransfer 窍门

  这篇关于当使用jQuery的.trigger（'dragstart'）进行HTML5的拖放功能时，如何使用.setData / .getData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！