jquery, dataTransfer не существует ни в каком случае (или где-либо) - PullRequest
Новая
       5

jquery, dataTransfer не существует ни в каком случае (или где-либо)

0 голосов
/ 07 мая 2020
• 1000 Свойства .draggable ()

Я могу выполнять перетаскивание, и изображение, показываемое при перетаскивании, является текстом, поэтому я хочу изменить его и показать собственное изображение. Идентификатор каждого LI содержит источник изображения (путь + имя файла)

Я пытаюсь использовать SetDragImage, но каждый раз получаю сообщение об ошибке «Uncaught TypeError: Cannot read property '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;

1 Ответ

0 голосов
/ 13 мая 2020

Могу точно сказать, что вы собираетесь делать, вы начали с чистого 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>
...