javascript - How to make a draggable handler that can change a div's css

Question

I'm making a handler function
here is the demo:
http://codepen.io/iamkaikai/pen/myVzvY?editors=011

Here's my question,
The blue div's width is 0, and I use jQuery to give it a width by reading pageX when on click
However, I would like the blue div's width follows the changing of pageX instead of change only once.

My goal is to make a draggable handler that can switch red div to blue div

Here is the code:

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

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

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

});

I know javascript only read the first pageX once when you click the div,
how do I make it read all the mouse position in one mouse down event?

Answer 1

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);
   });
   

Answer 2

属性pageX将返回您的事件的结果，因为该事件mousedown仅触发一次。

事件mousemove将捕获您的 div 上的鼠标移动并通过其移动触发事件。

看一下这个：

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

$("#line").on( "mousemove", function( event ) {
  $("#blue").css("width", event.pageX);
});