重新排序图像库

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

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

来源

2013-01-23 reggie

显示您的代码，所以我们可以看到，例如，您将事件附加到 –

我将拖动事件附加到列表项目。所以整个容器是可拖动的 - 除了链接到图像。 – reggie

您的问题是，锚标记是默认情况下不是有效的拖动句柄。您可以通过在拖动实例上使用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-21 12:18:08 dfarnbo

重新排序图像库

回答

相关问题