按住鼠标按钮时上下移动元素

Question

这里一切正常，但是我需要在按下鼠标按钮的同时保持上下移动act，而无需重复单击。

有帮助吗？

$('button').on('click', function(){
	let a = $('.act');
	a.insertBefore(a.prev());
});

$('button').on('contextmenu', function(e){
	e.preventDefault();
	let a = $('.act');
	a.insertAfter(a.next());
});

.act{background:gold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='title act'>LOREM</div>
<div class='title'>IPSUM</div>
<div class='title'>DOLOR</div>
<div class='title'>SIT</div>
<div class='title'>AMET</div>
</div>
<br>
<button>CLICK</button>

Answer 1

我做了一个小提琴来说明：

https://jsfiddle.net/10cgxohk/

html：

<p class="">x</p>

css：

.move {
  animation: MoveUpDown 1s linear infinite;
  position: relative;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 15px;
  }
}

javascript：

$('body').on('mousedown', function() {
    $('p').addClass('move');

  $('body').on('mouseup', function() {
    $('p').removeClass('move');
    $('body').off('mouseup');
    console.log('here');
  })
});

这确实很粗糙，如果您身上还有其他'mouseup'回调，则会造成问题，但是如果您不必担心，那么它应该可以工作。 javascript将一个类添加到元素，并且该类在css中设置为动画]

Answer 2

您将不得不使用鼠标事件来代替click和contextmenu事件，这是一个示例：

let intervalId;
const a = $('.act');
$('button').on('mousedown', function(event) {
  intervalId = setInterval(() => {
    if (event.button == 0) {
      a.insertBefore(a.prev());
    } else if (event.button == 2) {
      a.insertAfter(a.next());
    }
  }, 500);
});

$(document).on('mouseup', function(event) {
  clearInterval(intervalId);
});

$('button').on('contextmenu', function(event) {
  event.preventDefault();
});

.act {
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='title act'>LOREM</div>
  <div class='title'>IPSUM</div>
  <div class='title'>DOLOR</div>
  <div class='title'>SIT</div>
  <div class='title'>AMET</div>
</div>
<br>
<button>CLICK</button>

[在此示例中，我使用间隔将鼠标指针按下时每500毫秒移动元素，同时也防止了contextmenu事件，以便上下文菜单不会占用mouseup事件本身。