重新排序图片库
重新排序图片库
提问于 2013-01-23 17: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>让用户在这样的图片库中重新排序图像的最佳方式是什么？是否将拖动手柄图标添加到列表项目的一角？创建一个“重新排序模式”，在该模式下链接锚点将被移除，只留下可拖动的图像？或者，是否可以将其设置为仍然可以拖动链接？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-21 20:18:08
您的问题是，默认情况下，锚定标记不是有效的拖动手柄。您可以通过在拖动实例上使用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事件。您将需要区分单击和拖动，以使其顺利工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14475792
复制相关文章
相似问题
腾讯云开发者
