Question

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

我的意思是，将有一个主页面和每个链接点击（例如，其他部分，如约，画廊，联系表单）将在该主页面上打开一个新的拖放元素。像Windows桌面那样你可以在屏幕上移动你的应用程序窗口。

点击链接时，最好用AJAX调用不同的函数吗？像“gallery”链接会调用gallery-function并使用AJAX调用检索该“窗口”的动态生成内容，然后只在某些div上加载那些东西？或者其他类型的方法会更适合这个吗？

我希望我能够清楚地解释清楚这一点。我正在寻找一个适当的“设计模式”来实现这一点。所有的建议都很好！：）

Answer 1

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

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

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

希望这有助于开始。

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

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

这也是一个可以为您提供想法的问题What is a good Very-High level UI framework for JavaScript?

Answer 2

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

Answer 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。

Answer 4

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

在这个网站上，我创建了一个主页面，其中包含一个空的信息面板（可拖动），我通过Ajax加载了信息。

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

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

Answer 5

我建议使用html5拖放，因为即使它是一个糟糕的api，它开辟了很多可能性，比如移动你的＆＃34; windows＆＃34;例如，在浏览器选项卡之间我最近写了一个低级拖放模块，它从html5拖放api中抽象出几乎所有奇怪的怪异。您所需要做的就是创建一些绝对定位的窗口＆＃34;用一些拖拽手柄做这样的事情：

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

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

5 个答案: