Javascript 如何制作可以更改div的可拖动处理程序'；s css

我正在制作一个处理函数
以下是演示：


这是我的问题，
蓝色div的宽度是0，我使用jQuery在单击时读取pageX来给它一个宽度
但是，我希望蓝色div的宽度随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);
   });

});

我知道javascript在单击div时只读取第一个pageX一次，

---

如何使其在一次鼠标按下事件中读取所有鼠标位置？

属性

pageX

将在您的事件中返回结果，因为事件

mousedown

仅触发一次

Event

mousemove

将捕获div上的鼠标移动，并通过移动触发事件

看看这个：

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

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

文档表示整个文档宽度：

（#）行表示#行div的宽度：

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

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

---

谢谢你，伙计！另一个问题，为什么拖动时会有一点延迟？