選択リストのWebインターフェイスがあります。選択要素のペアとその間にボタンのペア(左向きの矢印と右向きの矢印)があります。ユーザーは、たとえば、左側の列のオプションの1つを選択し、右向きの矢印をクリックすることで、2つの列の間でアイテムを移動できます。
今、私は拡張要求を持っています:誰かがボタンをクリックする代わりに2つの列の間でアイテムをドラッグアンドドロップできるようにしたいと思っています。最初の2つの選択ボックスの設定の問題は、強調表示されたオプションの1つをクリックしてドラッグを開始するとすぐに、選択された他のすべてのオプションの選択が解除されることです。jQueryを使用して、マウスダウンイベントハンドラーを選択ボックスと、イベントオブジェクトでpreventDefault()を呼び出す個々のオプションの両方にアタッチしましたが、これでは不十分です。Firefox 3では、クリックされたオプションはすぐにフォーカスを失いますが、他のすべてのオプションは引き続き削除され、IE6(残念ながらまだサポートする必要があります)ではまったく違いはありません。
そのため、リスト要素やdivなどを使用して、選択ボックスの妥当な複製を作成できるのではないかと思いました。Firefoxで動作する合理的な外観の何かを作成できますが、IE6では、疑似選択オブジェクトの要素をShiftキーを押しながらクリックすると(オプションの範囲を選択するために)、IEはその間のすべてのテキストを選択します。クリックして最後にクリックした場所。繰り返しになりますが、関連するすべての要素にpreventDefault-ing mousedown、mouseup、およびclickハンドラーをアタッチしましたが、役に立ちません。
マウスクリックをインターセプトして手動で選択を管理することを考えて、元の選択ボックスと疑似選択オブジェクトの両方に透明なdivをオーバーレイしようとしましたが、IEでは機能しません。選択ボックスを使用する場合、クリックによって選択範囲が変更されるのを防ぐことはできません。また、選択要素のように見えるテキストを使用する場合、Shiftキーを押しながらクリックしてテキストの範囲を選択するのを防ぐことはできません。
いくつかの一般的な解決策はありますか、それとも私は運が悪いだけですか?