jquery，dataTransfer 不存在于任何事件（或任何地方）

Question

当我尝试在 'LI' 元素上实现 SetDragImage 时，我遇到了一个问题，'LI' 是动态创建的，在文件夹内部搜索并获取其中文件的名称，创建后我设置了 .draggable() 属性

我可以拖放，拖动时显示的图像是文本，所以我想更改它并显示自定义图像。每个id'LI'包含图片的来源（路径+文件名）

我正在尝试使用 SetDragImage，但每次出现错误“Uncaught TypeError: Cannot read 属性 'SetDragImage' of undefined

我也试过在没有 "originalEvent" 的情况下这样做，但我得到了同样的错误

有人可以帮我找出错误吗？

请在下面找到我的代码

提前致谢

祝你有美好的一天

HTML 节：

<div class="toolGridContainer">
<div class="containerTitle">Container1</div>
<div class="containerSeparator">
    <hr>
</div>
<li id="./images/Image1.svg" class="toolItem ui-draggable ui-draggable-handle">Item 1</li>
<li id="./images/Image2.svg" class="toolItem ui-draggable ui-draggable-handle">Item 2</li>
<li id="./images/Image3.svg" class="toolItem ui-draggable ui-draggable-handle">Item 3</li>
<li id="./images/Image4.svg" class="toolItem ui-draggable ui-draggable-handle">Item 4</li></div>

Javascript:

$(document).on('dragstart', '.toolItem', function(evt){

    var imgObj = document.createElement('img');
    imgObj.src = $(this).prop('id');
    evt.originalEvent.dataTransfer.setDragImage(imgObj, 0, 0);
});

编辑 1：这是我为重现问题所做的 JSFiddle

编辑 2：我做了一个测试div，手动让它可以拖动，还有一个测试函数来查看setDragImage在其他事件中是否可用，这个函数工作正常，为什么？

HTML:

<li id="testItem" draggable="true" class="toolItem">TestItem</li>

Javascript:

var testFunction = function(evt){
    console.log('testFunction running');
    var dataTransfer = evt.dataTransfer;
    var imgObj = document.createElement('img');
    imgObj.src = './image.svg';

    dataTransfer.setDragImage(imgObj, 0, 0);        
}

var testElement = document.getElementById('testItem');
testElement.ondragstart = testFunction;

Answer 1

可以 quite 告诉你你想要什么吗？你从一些纯粹的 javascript 开始，然后添加到 jquery ui 的可拖动中。 JSFiddle 是可拖动的，所以只是对其进行了修改。

你基本上只需要修改辅助函数。

<style>
.dropContainer{
  background-color: blue;
  height: 200px;
  width: 500px;
}
</style>

<div id="itemsList" class="toolContainer">
  <div class="toolGridContainer">
    <div class="containerTitle">Tool item container</div>
    <div class="containerSeparator">
      <hr>
    </div>
  </div>
</div>
<div id="dropContainer" class="dropContainer">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
var getFileList = function (id){
    for (i = 0; i < 5; i++) {
    var newElement = document.createElement('li');
    var newElementText = document.createTextNode('Item' + i);

    newElement.className = 'toolItem';
    newElement.appendChild(newElementText);

    newElement.id = './image.svg';

    $(newElement).draggable({
        helper: function(e) { 
            image = $(this).attr('id');

            var imgObj = document.createElement('img');
            imgObj.src = image;
            return imgObj;
        },
        cursor: 'dragging'
    });

    $(id).append(newElement);
    }
}

//Drop area
$('#dropContainer').droppable({
        accept: '.toolItem',
        tolerance: 'pointer',

        drop: function(evt, ui){
            var canvasObj = document.createElement('canvas');
              canvasObj.className = 'droppedItem';

              var ctx = canvasObj.getContext('2d');
              ctx.beginPath();
                    ctx.rect(20, 20, 10, 10);
                    ctx.stroke();

        $(canvasObj).draggable().appendTo('#dropContainer');
    }
});


getFileList('#itemsList');
</script>

jquery，dataTransfer 不存在于任何事件（或任何地方）

jquery, dataTransfer not existing in any event (Or anywhere)

javascript

jquery

drag-and-drop