Question

我有一个无序的图像缩略图列表。每个缩略图都链接到完整尺寸的图像。我使用YUI3库来允许拖动和放大删除缩略图的重新排序（只是开箱即用的示例代码）。

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

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

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

Answer 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事件。您需要区分点击和拖动以使其顺利运行。

重新排序图库

1 个答案: