用于模拟 JQuery UI 可排序列表拖动的 Javascript 测试 [英] 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 自己的 模拟插件 似乎提供了我需要的功能.但是，当我运行模拟时，可排序列表不会响应拖动事件，但其他组件(例如 Draggable)会响应.

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.

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