1

要素が動的に追加されるラッパーに含まれる水平方向のjquery-uiドラッグドロップリストがあります。(各要素の幅は 223px で、新しい要素が追加されるたびに、リストの幅は 223px ずつ増加します)

$("#list_wrapper").animate({
width: "+=446"
}, 'slow')
$("#list_items").animate({
width: "+=223"
}, 'slow')

これら 2 つの要素のスタイルは次のとおりです。

#list_wrapper{
width:672px;
position:relative;
}

#list_items {
height: 290px;
width: 672px;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
}

ここで、リストをブラウズするには、リストをドラッグするか、便利なようにナビゲーション ボタンを作成しました。ナビゲーション ボタンは、クリックするたびに「#list_items」要素を 223 ピクセル右または左にシフトします。

$("#btn_next").click(function () {
$("#list_items").animate({
left: "-=223"
}, 100);
});
$("#btn_prev").click(function () {
$("#list_items").animate({
left: "+=223"
}, 100);

リストがビューの外に出ないようにするために、これらのプロパティを .draggable に追加しました。

$("#list_items").draggable({
axis: "x",
containment: "parent"
});

これにより、ドラッグ時にリストがコンテナー ("#cart_wrapper") 内に残るようになりますが、ナビゲーション ボタンを使用すると、このメソッドは失敗します。それで、ナビゲーションボタンを使用している間、リストをその親内に保持するために適用できるcssトリックはありますか?

4

1 に答える 1

1

私はあなたのコードをテストしませんでした、しかし多分あなたはクリックイベントでこのようにそれをすることができました：

  • ドラッグによって変更された可能性のある現在の左の値を取得します
  • 次/前の223px（または次の1つ）との差を計算します
  • この違いをアニメートします（要素に焦点が合っていることを確認してください）
  • 左端で0を下回らないことを確認してください
  • 右端で、223px *のアイテムのみをヒットし、それを超えないことを確認します

コードを使用すると、エッジに到達したかどうかをチェックしないため、要素を無限に移動できます。:)

于 2012-06-24T19:44:53.263 に答える