Как сделать перетаскиваемый обработчик, который может изменять CSS-код div

Я делаю функцию обработчика
вот демонстрация:
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);
   });

});

Я знаю, что javascript читает первую страницуX только один раз, когда вы щелкаете div,
как мне заставить его прочитать всю позицию мыши за одно событие нажатия мыши?


javascript jquery drag onmousedown
person Huang Kaikai    schedule 10.12.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

  1. Документ обозначает всю ширину документа:

  2. (#) строка обозначает ширину #line div:

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

$("#line").on( "mousemove", function( event ) {
  $("#blue").css("width", event.pageX);
});
person I'm Geeker    schedule 10.12.2014
comment
Спасибо чувак! Другой вопрос, почему при перетаскивании небольшая задержка? - person Huang Kaikai; 10.12.2014

arrow_upward
0
arrow_downward

Свойство pageX вернет результат по вашему событию, поскольку событие mousedown запускается только один раз.

Событие mousemove будет фиксировать движение мыши на вашем div и запускать событие с его движением.

Проверь это:

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

$("#line").on( "mousemove", function( event ) {
  $("#blue").css("width", event.pageX);
});
person Syed Qarib    schedule 10.12.2014