jQuery События мыши не позволяют двигаться - PullRequest
Новая
       35

jQuery События мыши не позволяют двигаться

2 голосов
/ 18 января 2020

Я создаю простой скрипт, который регулирует размеры панелей (по горизонтали) путем захвата (mousedown) разделителя между панелями. (У меня есть фрагмент для тестирования ниже)

Он отлично работает в первый раз, но в нем есть ошибка.

Всякий раз, когда я хватаю "#divider", удерживая левую кнопку мыши и настраивая горизонтально, отпустите левую кнопку мыши, это работает. Но если вторым шагом является:

(A) Немедленно снова возьмите "#divider" и повторите => Ничего не происходит. Он хочет, чтобы я щелкнул по экрану, чтобы переместить панель.

(B) Нажмите в любом месте экрана, ТО, возьмите "#divider" и перетащите =>. Он работает отлично.

Что мне нужно исправить, чтобы пользователь мог захватить делитель и отрегулировать его, не нажимая сначала на экран? 

$(function() {
	
   //Store the container object in cache
   let $container = $("#container");
	
    //When the user holds the mouse down on the divider, identify the x-coordinate and store in the container. Also note that we are trying to adjust the panel ("data-inmove" = "1")
	$(document).on("mousedown", "#divider", function(e) {
		$container.attr({"data-start":e.pageX, "data-inmove":"1"});
	});
	
    //When the mouse has been released, check to see if we have an "inmove" variable equal to "1".
    // if so, then change the panel width. Finally reset the variables
	$(document).on("mouseup", function(e) {
		if ($container.attr("data-inmove") == "1") {			
			$("#leftPanel").css("flex", "0 0 " + (e.pageX-3) + "px");
		}
		$container.attr({"data-start":"0", "data-end":"0", "data-inmove":"0"});
	});
	
});
#container .col {
  padding-left:0px !important;
  padding-right:0px !important;
}

#container {
  width:95%;
  margin:10px auto;
  border:1px solid #929292;
  min-height:300px;
  position:relative;
}

#leftPanel {
  flex:0 0 200px;
  background-color:grey;
}

#divider {
  flex:0 0 3px;
  background-color:#333;
  cursor:e-resize;
}

#rightPanel {
  background-color:#fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<strong>Grab the black bar in between the panels. Adjust it horizontally. If you try it a second time (without clicking anywhere else), it won't work. It will wait until you click the page instead. Why does it do this?</strong><br/>

<div class="row" id="container" data-start="0" data-end="0" data-inmove="0">
    <div class="col" id="leftPanel">
      
    </div>
    
   <div class="col" id="divider"></div>
    <div class="col" id="rightPanel">
      
    </div>
  </div>

Ответы [ 2 ]

2 голосов
/ 18 января 2020

Я думаю, это то, что вы пытаетесь достичь sh. Это создает отдельные mousedown / mouseup события, которые устанавливают для переменной down значение true или false. Это тестируется на вложенном mousemove вместо этого, заменяя if($container.attr("data-inmove") == "1"){...} на if(down){...}.

Это новый скрипт: 

  // Creates a boolean if mouse is down
  var down = false;
  // Use mouse events to change it
  $(document).mousedown(function() {
    down = true;
  }).mouseup(function() {
    down = false;  
  }); 

  $(document).on("mousedown", "#divider", function(e) {
    $container.attr({"data-start":e.pageX, "data-inmove":"1"});
    $(document).mousemove(function(e){
      //check if down or not before changing properties
      if(down){
        $("#leftPanel").css("flex", "0 0 " + (e.pageX-3) + "px");
        $container.attr({"data-start":"0", "data-end":"0", "data-inmove":"0"});      
      }
    })
  });

А вот полный рабочий код: 

$(function() {

  let $container = $("#container");

  // Creates a boolean if mouse is down
  var down = false;
  // Use mouse events to change it
  $(document).mousedown(function() {
    down = true;
  }).mouseup(function() {
    down = false;  
  });  

  $(document).on("mousedown", "#divider", function(e) {
    $container.attr({"data-start":e.pageX, "data-inmove":"1"});
    $(document).mousemove(function(e){

      //check if down or not before changing properties
      if(down){
        $("#leftPanel").css("flex", "0 0 " + (e.pageX-3) + "px");
        $container.attr({"data-start":"0", "data-end":"0", "data-inmove":"0"});      
      }
    })
  });

});
#container .col {
  padding-left:0px !important;
  padding-right:0px !important;
}

#container {
  width:95%;
  margin:10px auto;
  border:1px solid #929292;
  min-height:300px;
  position:relative;
}

#leftPanel {
  flex:0 0 200px;
  background-color:grey;
}

#divider {
  flex:0 0 3px;
  background-color:#333;
  cursor:e-resize;
}

#rightPanel {
  background-color:#fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<strong>Grab the black bar in between the panels. Adjust it horizontally. If you try it a second time (without clicking anywhere else), it won't work. It will wait until you click the page instead. Why does it do this?</strong><br/>

<div class="row" id="container" data-start="0" data-end="0" data-inmove="0">
  <div class="col" id="leftPanel">

  </div>

 <div class="col" id="divider"></div>
  <div class="col" id="rightPanel">

  </div>
</div>
1 голос
/ 18 января 2020

Причина, по которой он не работает, в том, что вы не сделали e.preventDefault() в обработчике mousedown. См. Этот ответ:

javascript -events-- 'mouseup' не срабатывает после перемещения мыши

Подтвердили работу с вашим кодом, просто добавив одну строку, см. эта скрипка .

PS: Спасибо @chris за предложение альтернативного решения с лучшим UX, но я тоже хотел знать, почему это не работает.

...