JavaScript Drag＆Selectfunction正确完成

我正在尝试使用HTML和JavaScript编写拖动和选择function。 我的意思是会有一组具有任意绝对位置的物体。 我希望能够将光标拖到它们布局的区域上。 可以将其视为RTS策略（选择单位）或任何矢量图形编辑器（选择用于移动它们和编辑的对象）。

首先，我了解Google和SO的前几页中出现的内容。 因此，我绝不会要求为我搜索这些内容并在此处发布一些随机链接。

我能找到的大多数解决方案都存在某些缺陷。 主要问题是抑制实际文本选择，这似乎与Web浏览器的本质不符。 一些代码片段导致选择闪烁，我觉得很烦人。 有些在所有主流浏览器中都表现不佳。

我要求您实际使用或看到成功使用的代码/库的建议。

第二件事是，我想真正理解抑制选择背后的JavaScript内部。 如何在理论上做到这一点。 是否有任何非黑客的方法来实现这一目标？

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

然而它似乎与jQuery UI紧密结合，后者又需要jQuery 1.3.x而我真的很期待使用jQuery 1.5

Answer 1

抱歉我的英语。 我正在使用这个库进行拖放操作，这很棒。 不确定这是否是你需要的，但它可以帮助：

http://threedubmedia.com/code/event/drop/demo/selection

http://threedubmedia.com/code/event/drag

http://threedubmedia.com/code/event/drop

Answer 2

主要问题是抑制实际文本选择，这似乎与Web浏览器的本质不符。

您正在寻找的function是e.preventDefault（）;

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

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

Answer 3

如果我的问题得到解决，我不是百分百肯定的。 但我做了两个插件来处理你认为我描述的案例。 它们不需要任何依赖，因此不需要jQuery或者其他任何东西。 即使您不使用它们，代码也有详细记录，并且应该通过编写自己的代码来帮助您。

对于拖放，有dragNdrop
对于选择机制，有DragSelect

别客气。 希望有所帮助！

Answer 4

即使你想使用jquery 1.5，我仍然建议你查看jquery-ui Draggable选项（从我解释你的愿望的方式来看，这似乎就像你想要完成的那样）。

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

jquery-ui总是很快赶上jquery的最新版本，并且在很多情况下都可以正常工作。 我发现jquery-ui倾向于与jquery保持同步，比我发现的任何其他附加组件更好。

关于想知道如何做到这一点，你可以很容易地探索jquery的未压缩核心。 它有很好的文档记录，非常简单易读。