0

我有一个无序列表的图像缩略图。每个缩略图链接到全尺寸图像。我使用 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>

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

4

1 回答 1

0

您的问题是默认情况下锚标记不是有效的拖动句柄。您可以通过在拖动实例上使用 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 事件。您需要区分单击和拖动以使这项工作顺利进行。

于 2013-02-21T12:18:08.043 回答