重新排序图片库答案

【问题标题】：Reorder image gallery重新排序图片库
【发布时间】：2013-01-23 09:02:17
【问题描述】：

我有一个图像缩略图的无序列表。每个缩略图链接到全尺寸图像。我使用 YUI3 库来允许对缩略图图像进行拖放重新排序（只是开箱即用的示例代码）。

问题是指向全尺寸图像的链接：它不可拖动。只有缩略图下方的小部分（带有标题和值）是可拖动的。

<ul>
<li class="imgcontainer">
    <div>
        <a href="/image.jpg">
        <img src="thumbnail.jpg" border="0" alt="" />
        </a>
    </div>
    <div class="left">Title</div>
    <div class="right">$2.00</div>
    <div class="clear"></div>
</li>
<!-- ... -->
</ul>

允许用户在此类图片库中重新排序图片的最佳方式是什么？将拖动手柄图标添加到列表项的一角？创建一个“重新排序模式”，其中链接锚被删除，只留下可拖动的图像？还是可以设置成链接仍然可以拖动？

【问题讨论】：

显示您的代码，以便我们可以看到例如，您将事件附加到什么
我将拖动事件附加到列表项。所以整个容器都是可拖动的——除了图片的链接。

标签： javascript drag-and-drop yui yahoo

【解决方案1】：

您的问题是默认情况下锚标记不是有效的拖动句柄。您可以通过在拖动实例上使用 removeInvalid('a') 来更改此设置。

var dd1 = new Y.DD.Drag({
    node: '#drag1'
});

dd1.removeInvalid('a');

另一种选择是删除锚标记

<div class="linked-image">
    <img src="http://placekitten.com/50/50" border="0" alt="" />
</div>

并为图片添加点击监听器。

Y.on('click', function () {
    alert('go to url');
}, '.linked-image');

这里演示了这两种方法：http://jsfiddle.net/xGQne/

请注意，在这两种情况下，拖动完成后都会触发 click 事件。您需要区分单击和拖动以使这项工作顺利进行。

【讨论】：