JavaScript 拖动和选择功能正确完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5851156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Drag & Select functionality done right
提问by julx
I'm trying to write a drag & select functionality using HTML & JavaScript. By that I mean that there will be a set of objects with arbitrary absolute positions. I want to be able drag the cursor over the area where they are laid out. Think of it as an RTS strategy (selecting units) or alternatively any vector graphics editor (selecting objects for moving them around and editing).
我正在尝试使用 HTML 和 JavaScript 编写拖动和选择功能。我的意思是将有一组具有任意绝对位置的对象。我希望能够将光标拖到它们所在的区域上。可以将其视为 RTS 策略（选择单位）或任何矢量图形编辑器（选择对象以进行移动和编辑）。
First of all I'm aware of things that come up in the first few pages of Google & SO. Therefore I'm by no means asking for googling those things for me and posting here some random links.
首先，我知道 Google & SO 的前几页中出现的内容。因此，我绝不是要求为我搜索这些东西并在此处发布一些随机链接。
Most of the solutions that I was able to find are in some way flawed. The main problem is suppressing actual text selection, which seems kind of against the very nature of a web browser. Some of the code snippets cause selection twinkling that I find very annoying. Some don't behave well across all the major browsers.
我能找到的大多数解决方案在某种程度上都有缺陷。主要问题是抑制实际的文本选择，这似乎与 Web 浏览器的本质背道而驰。一些代码片段会导致选择闪烁，我觉得这很烦人。有些在所有主要浏览器中都表现不佳。
I'm asking for recommendations of code/libraries that you actually used, or seen successfully used.
我要求推荐您实际使用或成功使用的代码/库。
The second thing is, that I'd like to actually understand the internals of JavaScript behind suppressing selection. How should it be done in theory. Is there any non-hackish way of achieving that?
第二件事是，我想真正了解抑制选择背后的 JavaScript 内部原理。理论上应该怎么做。有没有任何非黑客的方式来实现这一目标？
The closest that I was able to find is this: http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html
我能找到的最接近的是：http: //view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html
However it seems to be tightly coupled with jQuery UI, which in turn requires jQuery 1.3.x whereas I was really looking forward to using jQuery 1.5
然而，它似乎与 jQuery UI 紧密结合，而后者又需要 jQuery 1.3.x 而我真的很期待使用 jQuery 1.5
回答by morgar
Sorry about my english. I'm using this library for drag/drop and it's great. Not sure if it's what you need, but it could help:
对不起我的英语。我正在使用这个库进行拖放操作，它很棒。不确定它是否是您需要的，但它可以帮助：
http://threedubmedia.com/code/event/drop/demo/selection
http://threedubmedia.com/code/event/drop/demo/selection
http://threedubmedia.com/code/event/drag
http://threedubmedia.com/code/event/drag
回答by Agniva De Sarker
The main problem is suppressing actual text selection, which seems kind of against the very nature of a web browser.
主要问题是抑制实际的文本选择，这似乎与 Web 浏览器的本质背道而驰。
The function you are looking for is e.preventDefault();
您正在寻找的功能是 e.preventDefault();
$("#inputform").mousedown(function(e){
e.preventDefault();
//console.log('mousedown');
}).mouseup(function(e){
e.preventDefault();
//console.log('mouseup');
});
This just solves the problem of text selection. I can see various drag-select js scritps across the web but somehow I am unable to make them work.
这只是解决了文本选择的问题。我可以在网络上看到各种拖动选择 js 脚本，但不知何故我无法使它们工作。
回答by chitzui
I'm not 100% sure if I got your question right. But I did two plugins which handle the cases you describe I think. They do not need any dependency, so no need for jQuery or what-so-ever. Even if you don't use them, the code is well documented and should help you by writing your own.
我不是 100% 确定我是否正确回答了您的问题。但是我做了两个插件来处理我认为的你描述的情况。他们不需要任何依赖，所以不需要 jQuery 或任何东西。即使您不使用它们，代码也有很好的文档记录，应该可以通过编写自己的代码来帮助您。
For the drag and drop, there is dragNdrop
For the selection mechanic, there is DragSelect
对于拖放，有dragNdrop
对于选择机制，有DragSelect
You're welcome. Hope that helps!
别客气。希望有帮助！
回答by Ken I.
Even though you desire to use jquery 1.5, I will still recommend checking out the jquery-ui Draggable option (from the way I am interpreting your desire this seems like what you are attempting to accomplish).
即使您希望使用 jquery 1.5，我仍然建议您查看 jquery-ui Draggable 选项（从我解释您的愿望的方式来看，这似乎是您正在尝试完成的）。
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/draggable/
jquery-ui is always very fast to catch up with the newest release of jquery, and in a lot of cases will work fine. I have found that jquery-ui tends to stay up-to-date with jquery better than any of the other add-ons I have found.
jquery-ui 总是能很快赶上 jquery 的最新版本，并且在很多情况下都能正常工作。我发现 jquery-ui 往往比我发现的任何其他附加组件更能与 jquery 保持同步。
With regards to wanting to know how this should be done, you can explore the uncompressed core of jquery rather easily. It is quite well documented and pretty straightforward to read.
关于想知道这应该如何完成，您可以很容易地探索未压缩的 jquery 核心。它有很好的文档记录并且很容易阅读。
