我正在开发一个Web应用程序,我正在尝试实现一个功能齐全的窗口系统.现在它进展顺利,我只遇到一个小问题.有时当我去拖动我的应用程序的一部分(通常是我的窗口的角落div,它应该触发调整大小操作)时,Web浏览器变得聪明并认为我的意思是拖放一些东西.最终结果,我的操作被搁置,而浏览器执行拖放操作.
是否有一种简单的方法来禁用浏览器的拖放?理想情况下,我希望能够在用户点击某些元素时关闭它,但重新启用它,以便用户仍然可以在我的窗口内容上使用浏览器的常规功能.我正在使用jQuery,虽然我无法找到它浏览文档,但如果你知道一个纯粹的jQuery解决方案,那就太棒了.
简而言之:我需要在用户按下鼠标按钮时禁用浏览器文本选择和拖放功能,并在用户释放鼠标时恢复该功能.
我已经在最新的 chrome 和 IE11 中对此进行了测试。
可以在输入中选择文本,然后将其拖到另一个输入中,至少在 IE11 和 chrome 中。
我想防止这种情况发生。
我发现很多示例/教程展示了如何在有关如何实现拖放的示例中防止相反的情况:允许拖动,同时防止文本选择。
但我想允许在鼠标拖动时选择文本 - 但防止所选文本可拖动。
设置 css 属性 -webkit-user-drag: none; 还可以防止文本选择,我原以为属性是:-webkit-user-select: auto; 将控制防止文本选择。
这是一个 jsfiddle:https ://jsfiddle.net/9g419erc/
input {
-webkit-user-select: auto;
user-select: auto;
-webkit-user-drag: none;
}Run Code Online (Sandbox Code Playgroud)
<article>
<input type="text" placeholder="Write text, select it, and drag">
<input type="text" placeholder="Then drop text here">
</article>Run Code Online (Sandbox Code Playgroud)
首选仅使用 css3 的解决方案