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/

どちらの場合も、ドラッグが完了した後にクリック イベントが発生することに注意してください。これをスムーズに行うには、クリックとドラッグを区別する必要があります。

于 2013-02-21T12:18:08.043 に答える