2011-05-01 65 views
12

我正在尝试写一个拖动&使用HTML选择功能& JavaScript。我的意思是,将会有一组具有任意绝对位置的对象。我希望能够将光标拖到布局的区域。将其视为RTS策略(选择单元)或者任何矢量图形编辑器(选择用于移动它们并编辑的对象)。JavaScript Drag&Select功能完成正确

首先,我知道在Google & SO的前几页出现的东西。因此,我决不会要求我为这些东西使用Google,并在这里发布一些随机链接。

我能找到的大多数解决方案在某种程度上都是有缺陷的。主要的问题是抑制实际的文本选择,这看起来有点违背Web浏览器的本质。一些代码片段导致选择闪烁,我觉得很烦人。有些在所有主流浏览器中表现不佳。

我在询问您实际使用的代码/库的建议,或者看到成功使用的代码/库的建议。

第二件事是,我希望真正了解抑制选择背后的JavaScript内部。理论上应该怎么做。是否有任何非黑客的方式来实现这一目标?

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

但是它似乎是紧密耦合与jQuery UI,而这又需要jQuery的1.3.x的,而我真的很期待使用jQuery 1.5

回答

20

对不起,我的英语。我使用这个库进行拖放,这很好。不知道是否是你所需要的,但它可以帮助:

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

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

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

+0

这看起来非常好。你尝试过哪些网页浏览器?还有:它使用HTML5还是可以与HTML4一起使用? – julkiewicz 2011-05-01 20:42:01

+0

那么,当我开始一个交互式国际象棋网站的项目时,我发现这个库,我仍在努力。所以,这是我第一次使用它,它还不在生产站点,但几个月来我从未发现任何错误或故障。我使用FF3.6作为主要的开发浏览器,我经常在IE上进行测试,并且偶尔在Chrome上进行测试。我使用HTML5,但我确定它必须在4上工作。 – morgar 2011-05-01 20:53:35

+0

好的,谢谢它看起来非常整齐。另外文档是体面的。我一定会看看。 – julkiewicz 2011-05-01 20:56:22

0

即使您希望使用的jQuery 1.5,我还是会建议您查看jquery- ui Draggable选项(从我解释你的愿望的方式来看,这看起来像你正在尝试完成的)。

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

jQuery的UI总是非常快赶上与jQuery的最新版本,并且在很多情况下将正常工作。我发现jquery-ui往往比我发现的任何其他附加组件都更好地跟jquery保持同步。

关于想知道这应该如何完成,你可以很容易地探索jquery的未压缩核心。这是非常有据可查,相当简单的阅读。

+0

至于jquery-ui与核心保持同步,我有一些担忧。它落后于两个主要版本(1.4和1.5),并且从我记得的时间来看,它已经落后了至少一年。似乎1.4引入了如此多的变化,以至于没有人愿意更新所有代码。 – julkiewicz 2011-05-01 21:47:51

1

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

您正在查找的功能是e。的preventDefault();

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

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

1

我不是100%确定,如果我把你的问题正确的。但是我做了两个插件来处理你描述的我认为的案例。他们不需要任何依赖,所以不需要jQuery或者什么都不需要。即使你不使用它们,代码也有很好的文档记录,并且可以通过编写自己的代码来帮助你。

对于拖放,有dragNdrop
对于选择技工,有DragSelect

不客气。希望有所帮助!