Javascript测试以模拟JQuery UI可排序列表的拖动 [英] Javascript testing to simulate drag for JQuery UI sortable lists

问题描述

我正在尝试编写一些前端Javascript测试，以测试 JQuery UI可排序列表的拖放功能我正在网络应用中使用.但是，我遇到了一个问题，即JQuery UI可排序列表似乎无法响应模拟鼠标事件.

I am trying to write some front end Javascript tests that can test drag and drop functionality of the JQuery UI sortable list I am using in my web app. However, I have hit a problem in that the JQuery UI sortable list does not seem to respond to simulate mouse events.

我尝试了多种技术对此进行测试，但最终我发现了JQuery自己的

I tried a number of techniques to test this, but in the end I found JQuery's own simulation plugin which seems to provide the functionality I need. However, when I run the simulations, the sortable list does not respond to the drag event, yet other components such as Draggable do respond.

使用简单拖动模拟示例，我可以很容易地演示所有这些内容.放在一起.在此示例中，我嵌入了jquery.simulate插件，但修改了拖动功能以减慢其触发的事件，以便您可以直观地看到正在发生的事情.正如您将看到的，模拟插件正确地将列表项1向下移动到项目3和4之间，但是当mouseup事件被触发时，该项目只是捕捉回到其原始位置，而不是对列表进行重新排序.我怀疑JQuery UI库正在寻找另一个事件，但是不幸的是我找不到它.

This can all be very easily demonstrated with the simple drag simulation example I put together. In this example I have embedded the jquery.simulate plugin but modified the drag function to slow down the events it is firing so that you can visually see what is happening. As you will see, the simulation plugin is correctly moving List item 1 down to between items 3 and 4, yet when the mouseup event is fired, the item just snaps back to it's original position instead of reordering the list. I suspect there must be another event the JQuery UI library is looking for, but unfortunately I've not been able to find it.

请转到 http://jsbin.com/efuyef/7/edit#javascript ，live ，以查看可排序列表拖动失败的示例.只需刷新页面即可使仿真再次运行.

Please go to http://jsbin.com/efuyef/7/edit#javascript,live to see the example where the sortable list drag fails. Just refresh the page to get the simulation to run again.

有人知道如何正确模拟可排序列表上的拖动事件吗?您的帮助将不胜感激.

Has anyone got any ideas how I can correctly simulate the drag event on a sortable list? Your help would be appreciated.

推荐答案

在网络上进行了大量搜索后，我没有找到解决该问题的方法，因此我着手开发了自己的解决方案.

After much searching around the web, I found NO solution to this problem, so I've gone ahead and developed my own solution.

为我的JQuery插件检出Github存储库 jquery.simulate.drag-sortable .js

Check out the Github repository for my JQuery plugin jquery.simulate.drag-sortable.js

如果发现任何问题，请编写测试以复制问题，并在Github中分叉项目或引发问题.

If you find any problems with this, please do write a test to replicate the issue and fork the project or raise an issue in Github.

这篇关于Javascript测试以模拟JQuery UI可排序列表的拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！