JavaScript拖拽和选择功能的正确实现

Question

我正在尝试使用HTML和JavaScript编写拖动和选择功能。我的意思是有一组具有任意绝对位置的对象，我想能够拖动光标并在它们所处的区域内选择它们。可以将其视为即时战略游戏（选择单位）或矢量图形编辑器（选择要移动和编辑的对象）。

首先，我知道谷歌和Stack Overflow的前几页中出现了很多解决方案。因此，我绝不会让你为我搜索这些内容，并在此处发布一些随机链接。

大多数解决方案都存在某些缺陷。主要问题是抑制实际文本选择，这似乎与Web浏览器的本质相违背。一些代码片段会导致选择闪烁，我认为这非常恼人。有些在所有主要浏览器中表现不佳。

我请求推荐实际使用过或成功使用过的代码/库。

第二件事是，我想真正理解JavaScript内部工作原理，了解如何抑制选择。在理论上应该如何做？是否有任何非黑客方式来实现此目的？

我能找到的最接近的是这个： http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

然而，它似乎与jQuery UI密切耦合，在使用jQuery 1.5时我真的很期待使用jQuery UI。

- julx

Answer 1

主要问题在于抑制实际文本选择，这似乎与Web浏览器的本质相违背。

您需要查找的功能是e.preventDefault（）;

$("#inputform").mousedown(function(e){
    e.preventDefault();
    //console.log('mousedown');
}).mouseup(function(e){
    e.preventDefault();
    //console.log('mouseup');
});

这只是解决了文本选择的问题。我可以看到网上有各种拖动选择的js脚本，但不知道为什么我无法让它们工作。

- Agniva De Sarker

Answer 2

我不完全确定我是否正确理解了你的问题。但是我编写了两个插件，它们处理你描述的情况。它们不需要任何依赖项，因此不需要 jQuery 或其他任何东西。即使您不使用它们，代码也有很好的文档注释，应该可以帮助您编写自己的代码。

对于拖放，有dragNdrop 对于选择机制，有DragSelect（v2现在也可以处理所选项目的拖放）

不用谢。希望能帮到你！

- chitzui

Answer 3

尽管您想使用jQuery 1.5，但我仍然建议您查看jQuery UI可拖动选项（从我理解您的需求的方式来看，这似乎是您想要实现的内容）。

http://jqueryui.com/demos/draggable/

jquery-ui总是非常快地跟上最新版本的jquery，而且在很多情况下都能正常工作。我发现jquery-ui比我找到的其他任何附加组件更容易与jquery保持最新。

关于想要知道如何完成这个任务，你可以很容易地探索未压缩的jquery核心。它有相当好的文档说明，而且阅读起来也很简单明了。

- Ken I.

---

关于jquery-ui与核心保持最新，我有一些担忧。它落后了两个主要版本（1.4和1.5），至少从我记得起就已经落后了一年。似乎1.4引入了很多变化，以至于没有人愿意更新所有的代码。 - julx