Can't drag and drop elements

[Andy Milbeck]

Hello All, 

I've implemented a drag and drop solution in the past that is currently working just fine. I just tried to do it again on a different page in my app and it doesn't seem to work. I can see the first element I want to move is getting highlighted on a .mouseButtonDown(0) but on my second .moveTo() nothing is happening. In fact, in repl mode I see a long pause and then the command eventually times out or something and neither of the elements are moved. I am trying to drag and drop some thumbnails and then assert that they are in the order I expect them to be. I suspect it has something to do with the draggable="false" attribute but I couldn't find any workarounds for this. I've tried with several different elements in the DOM to see if maybe I was just sending the mouseButtonDown command to the wrong element but nothing has worked so far. I've tried with .moveTo() and .moveToElement(). Both of them are exhibiting the same behavior. 

The code I'm using to drag and drop the elements is 

this.api.perform(function() {
  this.api.moveTo(thirdThumbnail.value.ELEMENT)
    .mouseButtonDown(0) // I can see the element gets highlighted here
    .moveTo(firstThumbnail.value.ELEMENT)
    .mouseButtonUp(0);
});

I'm using pretty much the exact same code snippet as above to drag and drop column headers on a table on a different page in my app. The only difference is the variable names I'm using in the moveTo().

The html snippet of the elements I'm trying to drag and drop is here

<div class="organize-pages-sortable">
  <div class="thumbnail-item" tabindex="0" id="1" title="Drag to reorder" draggable="false">

    <div class="thumbnail">
      <img src="/documents/32376126/thumbnails/1" class="thumbnail-100" draggable="false">

    </div>
    <span class="thumbnail-page-number no-selection">1</span>
  </div>
  <div class="thumbnail-item" tabindex="0" id="2" title="Drag to reorder" draggable="false">

    <div class="thumbnail">
      <img src="/documents/32376126/thumbnails/2" class="thumbnail-100" draggable="false">

    </div>
    <span class="thumbnail-page-number no-selection">2</span>
  </div>
  <div class="thumbnail-item thumbnail-selected" tabindex="0" id="3" title="Drag to reorder" draggable="false">
    <div class="thumbnail">
      <img src="/documents/32376126/thumbnails/3" class="thumbnail-100" draggable="false">
    </div>
    <span class="thumbnail-page-number no-selection">3</span>
  </div>
</div>

I've tried using elements that didn't have the draggable attribute but it didn't make a difference. Here are the selectors that I've tried using 

'div[id="1"]'
'div[id="1"] > div.thumbnail'
'div[id="1"] > div > img'

I can't figure out why it is failing. I'm not getting any error messages or anything. All I see is a long pause where it seems like the command is trying to work and then my test continues and ultimately fails because the order of the thumbnails was not changed. I even went so far as to try it out in the webdriverio repl and I'm getting the same behavior so it's not isolated to nightwatch. Any idea on how I can get this working? I can drag and drop the thumbnails manually just fine. It just doesn't work with the nightwatch command for some reason. Any one know if it is the draggable attribute that is causing this? Something else?

[Miller Chiang]

It does not work for me neither...push this question up for help~  thanks in advance

[Timur]

Hey! Use html-dnd lib in npm

It works only with Css selectors and works pretty good, verified!

[Andy Milbeck]

I can confirm this package mentioned by Timur works. I started writing a reply last week to mention it but never sent it for some reason. In any case, I've used it in two different e2e frameworks. One using Nightwatch and one using Protractor and it has worked well in both.