1

これは、より理論的なタイプの質問です。

私のWebアプリケーションでは、ユーザーがクリックできるボタンを作成して、（マウスを離すまで）すべてのマウスの動きが特定のDIVに変換される移動モードを開始したいと考えています。

私が何を意味するのかをよりよく理解するために、画像の一部を表示するボックスを考えてください（ボックスはオーバーフロー：非表示）-画像を直接ドラッグするのではなく、ボックス内で画像を移動できるようにしたい、ただし、代わりにハンドルをドラッグします（ドラッグしても移動しないハンドル）

最適な場合、ドラッグ操作がオンになっている間、マウスカーソルは非表示になります。

私の基本的な考えはドラッグ可能なものを使用することでしたが、アクセス可能でありながら非表示にする方法がわかりませんでした。

javascript / jQueryを使用してそれをどのように達成しますか？

4

2 に答える 2

2

カーソルを非表示にすることはそれほど難しくありません。この質問の上位2つの回答を参照してください。

ハンドルについては、jQueryUIDraggableのハンドルオプションを使用してみてください。ハンドルを静止しているように見せるための鍵は、ハンドルのように見える別の要素を用意し、その上に実際のハンドル（空の要素）を配置することです。

次に、stop（）イベントが発生したときに、偽のハンドルを覆って、実際のハンドルを元の位置に戻します。

したがって、start（）イベントでは、カーソルを非表示にするクラスを実際のハンドルに追加し（前述の投稿のいずれかのメソッドを使用）、stop（）イベントが発生したときにそのクラスを削除して、カーソルを再表示します。

于 2012-09-09T22:51:53.810 に答える
1

最も簡単なアプローチは、ボタンのクリックイベントにさまざまなCSSスタイルを適用することです。

そのスタイルと疑似クラスを:hover持つ疑似クラスのクラスを要素に（クリックで）追加します。ユーザーのマウスがドラッグ可能な領域を離れたら、これらのスタイルを削除することができます。cursor: move;cursor: none;:active

クリックすると、関数は次のようになります。

$('#myButton').click(function(){
   $('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
   $(this).removeClass('draggable');
});

質問を正しく理解しましたか？

于 2012-09-09T22:51:39.617 に答える