问题标签 [draggable]

我想实现一个拖动功能，用户可以在工作区周围拖动对象。这当然是容易的一点。困难的一点是尝试使其成为物理上正确的拖动，其中包含由于扭矩力矩而产生的旋转（想象一下，只用一根手指在桌子上拖动一本书，拖动时它是如何旋转的？）。

有谁知道我在哪里可以找到关于如何编码的解释（仅限 2D，仅限矩形，不需要摩擦）？

非常感谢，大卫

编辑：

我写了一个小应用程序（有明显错误的行为），我希望它能比文字更好地传达我正在寻找的东西。C# (VS 2008) 源代码和编译的 exe 在这里

编辑2：

调整示例项目以提供可接受的行为。新的源代码（和编译的 exe）可在此处获得。用 C# 2008 编写。我提供此代码没有任何版权，请随意使用/修改/任何内容。无需通知我或提及我。

如果我有这个标记：

这个jQuery代码：

拖动第一列时，克隆的跨度将捕捉到第二列而不是第一列。如果我尝试拖动表格单元格而不是其中的跨度，则它会在表格之外捕捉。如果我删除轴：'y' 按预期工作，除非我不再有我想要的 Y 轴限制。有任何想法吗？谢谢。

我有两个要素：

1.固定高度的父母，overflow:hidden

2.它的孩子，较大的固定高度。

我希望能够在父 div 中上下拖动列表。我正在使用 jquery ui draggable 插件来实现垂直拖动，但我不确定如何在父 div 中约束列表。

我将如何设置列表位置的垂直上限和下限？

我想知道是否有一种方法可以使 jQuery 可拖动只能向上、向下和向左、向右拖动。我想防止用户对角拖动 div。在我的情况下，无法在可拖动 UI 中使用网格选项。

http://jqueryui.com/demos/draggable/#constrain-movement

这怎么可能？

谢谢！

我一直在使用 mootools 并尝试 jQuery 一个星期，所以这可能是一个新手问题 - 尽管我在手册中没有找到任何内容。

在 mootools 中，当您在可排序列表中使用选项克隆时，它会创建图像/对象的克隆，帮助您可视化图像/对象将被丢弃的位置 - 在我的缩略图排序系统上效果很好。

mootools sortables 文档页面

好吧，jQuery 也有同样的选择，克隆，但是当我使用它时，它什么也没做。意思是，它实际上克隆了元素，而您拖动的元素是一个克隆，但是当您放下它时，原始元素会保持在原来的位置。您可以使用他们网站上的可拖动演示来检查此行为。看看semi-transparent-clone，你可以移动它，当你放下它时，它就在那里。

这是错误的行为还是它应该是什么？我可以自己复制 mootools 的行为，但尽管这将是一个标准选项......

先感谢您！

I'm creating an interface to allow a user to zoom in on an image and drag the zoomed version around within a clipping mask div.

I have a div 200px by 200px that I set overflow: hidden on. Then I load a std img (<img src="etc">) into the div that is, say, 1000px by 1000px.

Then I use jQuery

The numbers are hard coded. So far I can only find them by trial and error...

The problem is that each time I make a change to the page (Ie insert another element above my container div) the page size changes and my hard coded [x1, y1, x2, y2] stop working correctly.

The main issue is I don't fully understand [x1, y1, x2, y2] ...

Here is the jQuery docs regarding this:

Am I right in thinking that x1 is the left most draggable point, x2 is the right most draggable point? (and same for y1 & y2)?

If so, what would be the best strategy to calculate them dynamically?

Also, any other quick and easy solutions to the main problem of "Drag a zoomed image within a div clipping mask" would be much appreciated.

在我的 CMS 上，我有一个缩略图列表（可排序）。缩略图效果很好，现在我正在编写一个插件来将它们拖到 tinyMCE 窗口中。

由于 tinyMCE 窗口有一个 iFrame，所以它不能很好地工作。

jQuery为 Draggables 提供了一个名为 iframeFix 的选项，它可以完全按照我的需要工作。但是，该列表必须是可排序的。我在 Google 上进行了相当广泛的研究，但没有人符合我的要求。StackOverflow 上有人做过吗？

将 iframeFix 应用于 Sortables？

如果没有...我正在使用 jQuery 插件。

先感谢您！

我不确定这是否是一个错误 - 但在此示例中，无法选择可拖动元素下方的文本。

表单元素也有同样的问题。

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

有任何想法吗？

我创建了一个可排序的列表和一个可拖动的项目来添加新项目。

我有一个删除按钮，当我从可拖动项中添加新项目时，我想让它可见。

如何连接事件？

这是从可拖动对象拖动到可排序对象的元素。

我在 jQuery、.Net Ajax 和普通的旧 javascript 中看到了许多可拖动 div 的实现。虽然它们都很新颖，并且可以轻松地解决问题，但我一直不明白重点是什么。

可拖动 div 的价值是什么？可拖动的 div 实现了哪些用例？

是否有可拖动的 div 改善用户体验的地方，或者它们是 web 2.0 版本的<blink>标签？