Имеется <div class="needsToMove">
на странице. Через js добавили метод .draggable()
и обработчик клика. Как отличать эти события и работать с ними не зависимо друг от друга?
-
5addEventListener click drag– qwabra23 июл 2018 в 2:19
-
Добавьте код примера, неясно в чем проблема– Юрий Безруков13 ноя 2018 в 18:48
Добавить комментарий
|
1 ответ
Есть различие между mousemove
, mousedown
и mouseup
.
Вы можете сделать что-то вроде этого:
var flag = 0;
var element = document.getElementById('draggable');
$("#draggable").draggable();
element.addEventListener("mousedown", function(){
flag = 0;
}, false);
element.addEventListener("mousemove", function(){
flag = 1;
}, false);
element.addEventListener("mouseup", function(){
if(flag === 0){
console.log("click");
}
else if(flag === 1){
console.log("drag");
}
}, false);
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style = "background-color: red; color: white" id = "draggable">Drag or click me></div>
Для нубов: это выводится в консоль.
И это работает.