0

ここでハンドラー関数を作成してい
ます。デモは
http://codepen.io/iamkaikai/pen/myVzvY?editors=011

これ が私の質問です
。青い div の幅は 0 です。クリック時に pageX を読み取る
ただし、青い div の幅は、1 回だけ変更するのではなく、pageX の変更に追従するようにしたいと思います。

私の目標は、赤い div を青い div に切り替えることができるドラッグ可能なハンドラーを作成することです



コードは次のとおりです。

$( "#line" ).draggable({
   containment: "#red";
});

$( document ).on( "mousemove", function( event ) {

   $( "#line" ).text( "pageX: " + event.pageX );
   $("#line").mousedown(function(){
      $("#blue").css("width", event.pageX);
   });

});

divをクリックしたときにjavascriptが最初のpageXを1回だけ読み取ることは知っていますが、
1回のマウスダウンイベントですべてのマウス位置を読み取らせるにはどうすればよいですか?

4

2 に答える 2

0

イベントは 1 回だけトリガーされるため、プロパティpageXはイベントの結果を返します。mousedown

イベントmousemoveは、div でのマウスの動きをキャプチャし、その動きでイベントをトリガーします。

これをチェックしてください：

$( document ).on( "mousemove", function( event ) {
  $( "#line" ).text( "pageX: " + event.pageX );
});

$("#line").on( "mousemove", function( event ) {
  $("#blue").css("width", event.pageX);
});
于 2014-12-10T06:14:11.780 に答える
0

  1. Document はドキュメント全体の幅を示します:

  2. (#)line は #line div の幅を示します。

     $( document ).on( "mousemove", function( event ) {
  $( "#line" ).text( "pageX: " + event.pageX );
});

$("#line").on( "mousemove", function( event ) {
  $("#blue").css("width", event.pageX);
});
于 2014-12-10T06:16:10.620 に答える