Drag And Drop not Working in a Sortable JQuery List

[lukeis]

Originally reported on Google Code with ID 5149

While trying to test sorting a Sortable List using Selenium WebDriver. The javascript
which causes the 'planceholder' does not render while the Selenium Drag and Drop Action
occurs,  causing the target element to remain in position.


Source:

<div id="ReorderEvents">
            <ul id="EventsToEdit" class="sortable ui-sortable">
                    <li id="156309" class="ui-state-default ui-corner-all"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>Event1</li>
                    <li id="156310" class="ui-state-default ui-corner-all"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>Event2</li>
                    <li id="156311" class="ui-state-default ui-corner-all"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>Event3</li>
                    <li id="156312" class="ui-state-default ui-corner-all"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>Event4</li>
            </ul>
        </div>

$("#EventsToEdit").sortable({
                placeholder: "ui-state-highlight ui-corner-all",
                containment: "#ReorderEvents",
                stop: function (event, ui) {
                    var data = $('#EventsToEdit').sortable('toArray');
                    $("#eventSequence").val(data);
                }
            });


Test:

var eventsItems = GetEventItems(); // Get All Event LI's

foreach (var eventName in value)
{

  var element = eventsItems.Single(x => x.Text.Equals(eventName));
  var target = eventsItems[0];

  //new Actions(Driver).DragAndDrop(element, target).Build().Perform();  

  new Actions(Driver)
      .MoveToElement(element)
      .ClickAndHold()
      .MoveToElement(target)
      .Release()
      .Build()
      .Perform();      
}


This seems to occurs in all 3 browsers

Using Selenium WebDriver 2.28.0
Windows:7
C# 4.5
Firefox (18.0.2)
IE9 
Chrome(Version 24.0.1312.57m)

Reported by AndyLiddle on 2013-02-11 14:47:25

[lukeis]

Please provide a complete executable script against either a public page or a complete
sample page (HTML+CSS+JS).

Our regression tests suite contains a couple of tests for jQuery sortable lists, see
[1] for the tests and [2] for the test page. These tests are green, see CI status [3].

[1] https://code.google.com/p/selenium/source/browse/java/client/test/org/openqa/selenium/interactions/BasicMouseInterfaceTest.java#101
[2] https://code.google.com/p/selenium/source/browse/common/src/web/draggableLists.html
[3] http://ci.seleniumhq.org:8080/

Reported by barancev on 2013-02-11 21:03:16

• Status changed: NeedsClarification

[lukeis]

it seems to be a problem when you define the placeholder and containment properties
of the sortable.

Our tests parsed previously before these were added.

Reported by AndyLiddle on 2013-02-11 22:01:01

[lukeis]

Hi!

Is this issue still actual with latest Selenium?

If yes please provide requested at #c1 info.

Reported by a.u.savchuk on 2013-09-10 15:46:13

[lukeis]

Closing the issue as there is no reproduction case.

Reported by barancev on 2013-10-19 10:57:20

• Status changed: Invalid

[lukeis]

I have similar problems to what the original poster described: When attempting to simulate
a drag-and-drop on a jQuery sortable widget using Webdriver, the target element reverts
to its original position when it is dropped on another element. My test fails in Firefox
on both Linux and Windows XP, but succeeds in Chrome (Linux, Win) and IE9.

Andy mentioned that his problem seemed to be related to defining placeholder or containment
options when initializing the jQuery widget, but the presence of these options doesn't
change the outcome of my tests.

My sortable list is horizontal, rather than vertical, which might explain the failure.
In all other respects, my HTML and JavaScript are similar to Andy's. Have you tried
writing tests for horizontal sortable lists?

-----------------

Webdriver code:

// Initially, firstTab is to the left of secondTab in a horizontal list
int offset = secondTab.getLocation().getX() - firstTab.getLocation().getX();
Actions builder = new Actions(webdriver);
Action dragAndDrop = builder.moveToElement(firstTab)
    .clickAndHold()
    .moveByOffset(offset + 10, 0)
    .pause(500) // I found the pauses were necessary to get the test working in other
browsers
    .release()
    .pause(500)
    .build();
dragAndDrop.perform();
// secondTab should now come before firstTab in the horizontal list

Reported by alexandermi@google.com on 2013-11-12 22:48:43

[lukeis]

I'm using windows 7 chrome.  Was not able to get JQuery Ui sortable to work either.
This did work in firefox.

    [TestFixture]
    class Zest
    {
        [Test]
        public void DoZest()
        {
            var driver = new ChromeDriver();
            driver.Navigate().GoToUrl("http://jqueryui.com/resources/demos/sortable/connect-lists.html");
            Thread.Sleep(5000);
            var firstItem = driver.FindElements(By.CssSelector("#sortable1 .ui-sortable-handle"))[0];

            var otherContainer = driver.FindElement(By.CssSelector("#sortable2"));

            //drag item 1 to item 3
            var actions = new Actions(driver);
            actions.DragAndDrop(firstItem, otherContainer);
            actions.Build().Perform();

        }
    }

Reported by SBSquid on 2014-09-20 00:36:12

[lukeis]

Reported by luke.semerau on 2015-09-17 18:16:46

• Labels added: Restrict-AddIssueComment-Commit