Javascript 如何实施"；拖放“；网站上的用户界面？

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

我的意思是，将有一个主页，每次点击链接（例如，关于，画廊，联系方式等其他部分）将在主页顶部打开一个新的拖放元素。类似于windows桌面，您可以在屏幕上移动应用程序窗口

单击链接时，最好使用AJAX调用不同的函数吗？就像“gallery”链接调用gallery函数，通过AJAX调用检索“窗口”的动态生成内容，然后将这些内容加载到某个div上？ 或者其他类型的方法更适合这种情况

---

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

我首先建议使用jQuery创建拖放

我相信您可以找到许多jQuery的拖放示例

在学习jQuery之前，我已经使用了雅虎javascript库拖放。 下面是一些关于雅虎的例子。

希望这对开始有所帮助

互联网上也有现成的几乎完整的系统用户界面。 这里有一个，但还有更多

---

此外，这是一个可以为您提供想法的问题，HTML 5.0提供了内置的拖放功能，但您可能需要使用jQuery UI库中的和。

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>

项目Epsilon
项目Zeta
项目Eta
项目Theta

---

。更多信息。

您描述的方式听起来是实现这一目标的好方法。我不知道是否有不同的方法。我在以前的一个站点（www.ponyhof.be）上实现了类似的功能，尽管没有可拖放的实现。欢迎您来看看代码，它不是一个真正的美，但它的工作

在这个网站上，我制作了一个带有空信息面板（draggable）的主页，在那里我通过Ajax加载信息

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

---

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

我建议使用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?
    }
})

---

查看此处的模块：

您是否正在寻找提供DnD小部件的工具包？或者你会问在你的界面上使用DnD元素是不是一个好主意？不，我只是想了解一些关于如何实际实现这种设计的建议。我应该用ajax调用函数并填充DnD元素，还是用其他方法呢？谢谢你的建议，但我更想知道这种方法背后的“设计哲学”。我应该只有一个页面，然后用AJAX填充DnD元素，还是采用其他方式？@Nikkeloodeni是的，最好有一个页面，但在AJAX更新后运行JavaScript会有点困难，不管你怎么做。还可以查看smartclient.com以了解想法：）并搜索其他javascript操作系统。好的链接，我在使用ExtJs的门户中使用DnD的allot。