如何在网站上实现“拖放”用户界面？答案

【问题标题】：How to implement "drag n drop" user interface on website?如何在网站上实现“拖放”用户界面？
【发布时间】：2010-04-20 11:00:44
【问题描述】：

我想知道实现某种“拖放”用户界面的最佳方式是什么？

我的意思是会有一个主页，每次链接点击（例如，其他部分，如关于、画廊、联系表格）都会在该主页顶部打开一个新的拖放元素。类似于 Windows 桌面，您可以在其中移动应用程序窗口。

点击链接时最好使用 AJAX 调用不同的函数吗？就像“画廊”链接会调用画廊功能并使用 AJAX 调用检索该“窗口”的动态生成的内容，然后将这些内容加载到某个 div 上？或者其他类型的方法更适合这个？

我希望我能够足够清楚地解释这一点。我正在寻找一个合适的“设计模式”来实现这一点。欢迎所有建议！ :)

【问题讨论】：

您是否正在寻找为您提供 DnD 小部件的工具包？或者你问在你的界面中使用 DnD 元素是否是个好主意？
Nono，我只是在寻找一些关于如何实际实现这种设计的建议。我应该使用 ajax 调用函数并以这种方式填充 DnD 元素，还是应该使用其他方式？

标签： javascript html design-patterns drag-and-drop

【解决方案1】：

我首先建议使用 jQuery 来创建拖放
http://jqueryui.com/demos/draggable/

我相信你可以找到很多 jQuery 的拖放示例

在学习 jQuery 之前，我使用过 yahoo javascript 库拖放。这是雅虎的一些例子。 http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html

希望对开始有帮助。

互联网上也有所有现成的几乎完整的系统用户界面。这是一个http://www.smartclient.com/，但还有更多……

https://github.com/mui/mochaui
http://www.extjs.com/

这也是一个可以给你思路的问题What is a good Very-High level UI framework for JavaScript?

【讨论】：

感谢您的建议，但我更想知道这种方法背后的“设计理念”。我应该只有一页，然后使用 AJAX 填充 DnD 元素还是使用其他方式？
@Nikkeloodeni 是的，最好有一个页面，但是在 ajax 更新后运行 JavaScript 有点困难，你怎么能做到。检查 smartclient.com 的想法 :) 并搜索其他 javascript 操作系统。
很好的链接，我在使用 ExtJs 的门户中使用了 DnD 的分配。

【解决方案2】：

HTML 5.0 提供内置拖放功能，但您可能需要使用 jQuery UI 库中的 Draggable 和 Droppable。

【讨论】：

【解决方案3】：

Dojo Toolkit 提供了一种定义 DnD 元素的简单方法。

<div dojoType="dojo.dnd.Source" class="container">
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div>
</div>

See the live example。更多关于Dojo DnD in DojoCampus。

【讨论】：

【解决方案4】：

您描述的方式听起来是实现这一点的好方法。我不知道是否有不同的方法。我在以前的网站 (www.ponyhof.be) 上实现了类似的东西，尽管没有可丢弃的实现。欢迎你看一下代码，它不是真正的美，但它确实有效。

在这个网站上，我制作了一个带有空白信息面板（可拖动）的主页，我通过 Ajax 加载了信息。

自从我创建这个网站以来，我学到了一些可以简化实施的东西（所以现在我会做出不同的事情）。更具体地说，我会更好地利用 jQuery 的委托方法，它可以自动将操作附加到通过 ajax 加载的链接（在 ponyhof.be 上，我在 ajaxComplete 事件被触发后附加了它们）。

但总的来说，我认为您提出的建议听起来像是构建这样一个界面的好方法，但我没有遇到更好的方法。

【讨论】：

【解决方案5】：

我建议使用 html5 拖放，因为即使它是一个糟糕的 api，它也提供了很多可能性，例如在浏览器选项卡之间移动“窗口”。我最近写了一个低级的拖放模块，它从 html5 拖放 api 中抽象出几乎所有奇怪的怪异之处。您需要做的就是创建一些带有拖动手柄的绝对定位的“窗口”，然后执行以下操作：

var startMouse, startWindow
dripDrop.drag(dragHandle, {
    dragImage: true, // default drag image
    start: function(setData, e) {
      setData('window', someWindowId)
      startMouse = {x:e.pageX, y:e.pageY}
      startWindow = {x: yourWindow.style.top, y: yourWindow.style.left}
    },
    move: function(position, e) {
      yourWindow.style.top = startWindow.x + (position.x-startMouse.x)
      yourWindow.style.left = startWindow.y + (position.x-startMouse.y)
    }
})
dripDrop.drop(myDropzone, {
    drop: function(data, pointer, e) {
        // maybe you want do do something on dropping a window in a particular place?
    }
})

在此处查看模块：https://github.com/fresheneesz/drip-drop

【讨论】：