用于模拟 JQuery UI 可排序列表拖动的 JavaScript 测试
我正在尝试编写一些前端 Javascript 测试,可以测试 JQuery UI 可排序列表 我正在我的网络应用程序中使用。但是,我遇到了一个问题,JQuery UI 可排序列表似乎没有响应模拟鼠标事件。
我尝试了多种技术来测试这一点,但最终我发现了JQuery自己的 模拟插件似乎提供了我需要的功能。但是,当我运行模拟时,可排序列表不会响应拖动事件,但其他组件(例如 Draggable)会响应。
这一切都可以通过我整理的简单拖动模拟示例轻松演示。在此示例中,我嵌入了 jquery.simulate 插件,但修改了拖动函数以减慢其触发的事件,以便您可以直观地看到正在发生的情况。正如您将看到的,模拟插件正确地将列表项 1 向下移动到项 3 和 4 之间,但是当触发 mouseup 事件时,该项只是弹回到其原始位置,而不是重新排序列表。我怀疑 JQuery UI 库一定在寻找另一个事件,但不幸的是我没能找到它。
请访问 http://jsbin.com/efuyef/7/edit#javascript,live< /a> 查看可排序列表拖动失败的示例。只需刷新页面即可再次运行模拟。
有谁知道如何在可排序列表上正确模拟拖动事件?我们将不胜感激您的帮助。
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.
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.
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.
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
经过在网络上的大量搜索后,我发现没有解决这个问题的方法,所以我继续开发自己的解决方案。
查看我的 JQuery 插件的 Github 存储库 jquery.simulate.drag-sortable.js< /a>
如果您发现任何问题,请编写一个测试来复制该问题并分叉该项目或在 Github 中提出问题。
After much searching around the web, I found NO solution to this problem, so I've gone ahead and developed my own solution.
Check out the Github repository for my JQuery plugin jquery.simulate.drag-sortable.js
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.