重新排序圖像庫

我有一個圖像縮略圖的無序列表。每個縮略圖鏈接到全尺寸圖像。我使用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

重新排序圖像庫

回答

相關問題