Question

我正在制作处理程序功能
这是演示：
http://codepen.io/iamkaikai/pen/myVzvY?editors=011

这是我的问题，
蓝色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);
   });

});

我知道当你点击div时，javascript只会读取第一页的X. 如何在一次鼠标按下事件中读取所有鼠标位置？

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

Answer 2

Document表示整个文档宽度：

（＃）line表示#line div的宽度：

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

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

如何制作一个可以改变div的css的可拖动处理程序

2 个答案: