Drag and drop not working

[eljivarughese]

I am dragging one text element from a tree to a drop zone. After element get dropped will have a table displayed. No errors shown but the element is not getting dropped. Also when we do dragging manually ->we can see a bubble with green color until it get dropped. That also not got displayed.

Note:both element identification is successful. I have gone through the issues mentioned on cypress.io channels but my issue is not same.

This is actually not dragging element to drop zone.

This is basic step for our application - we are in process of changing smoke tests to use cypress instead of selenium.

This issue actually blocks this. Any help appreciated.

Once we run smoke on CI/CD we are also looking for dashboard services to report

HTML for element to be dragged

 class="tree-item-content ng-binding ng-scope" ng-      if="!item.ui.search.html" ng-  bind="item.ItemName" ng-class="vm.itemStyle(item)" ng-dblclick="vm.treeDoubleClick ($event, item, itemParent)">Gender</

HTML for Drop Zone

 id="itl-drop-zone-down" class="dropArea" ng-class="{'itl-drop-zone-active': currentDropType === 'down' && dropZoneOptions.down && dropZoneOptions.down.options.length > 0, 'itl-highchart-down-drop-zone-height' : isHighchart || isWidthChart, 'itl-table-down-drop-zone-height':isVizGrid}" kendo-droptarget="" k-dragenter="onDragEnter" k-dragleave="onDragLeave" k-dragcancel="onDragLeave" k-drop="onDrop" droptype="down" data-role="droptarget">
    <span class="itl-drop-zone-header">Down</span>
    <!-- ngIf: !isInitialLayout() && displayOptions('down') -->

I tired below solution but not working

describe('Drag and drop of Gender test', function() {
const dataTransfer = new DataTransfer;

function dndIt() {
  cy.get('.tree-item-content').contains("Gender")
    .trigger('dragstart', { dataTransfer });

  cy.get('#itl-drop-zone-down')
    .trigger('drop', { dataTransfer });

  cy.get('.tree-item-content').contains("Gender")
    .trigger('dragend');               
}                                      

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('Paste your url ');
});

it('Check whether the drag and drop of Gender is possible', function() {
  dndIt();  
  cy.get('#itl-drop-zone-down')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

});

Chrome:71(Tried on Electron59 also same issue)
Cypress version 3.1.4

[jennifer-shehane]

Please refer to this thread and this thread for workarounds to drag and drop, including a user's plugin here: https://www.npmjs.com/package/cypress-drag-drop

I will be closing this as issues in our GitHub repo are reserved for potential bugs or feature requests.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

Alternatively, signing up for any of you paid plans gives you access to our team for support via email. If you would like something higher touch, we also offer screen sharing and workshops with our premium support options.

[dil-adoddala]

hey, check in CSS , at the time of drop u get some attribute set to green and here u can add for example in your case.

cy.get('#itl-drop-zone-down')
    .trigger('drop', { bubble : 'green' , dataTransfer });

I had the similar scenario and it worked for me