0
私は2つのイメージスライダーを作りました。それぞれのイメージスライダーは、独立してトリガーできる1つのドラッグバーを持っています。ドラッグバーの1つをつかんだときに、マウスボタンを押しながらドラッグすることができます。ドラッグバーを囲む2つの画像の幅は、ドラッグバーの位置に応じて変化します。mousemownがトリガーするのを防ぐ
私はマウスイベントを追跡するdragというブール変数を作成しました。ドラッグバーの1つをクリックしてマウスを押したままにすると、変数はtrueに設定されます。マウスボタンが離されると（ウィンドウ内の任意の場所）、変数はfalseに設定されます。
マウスを動かすと（ウィンドウ内のどこでも）、ドラッグ変数がtrueに設定されているかどうかを確認するコールバック関数（dragImg）がトリガされます。その場合、関数はドラッグバーの位置と周囲の画像の幅を変更します。
私の問題は：マウスボタンを押したままにすると、dragImgはトリガーされません。この関数は、マウスボタンが離されたときにのみトリガされます。マウスボタンを押したままでdragImg関数をトリガするにはどうすればよいですか？
var warea = 0, locktarget = 0, xprev = 0, drag = false;
var dragbars = document.querySelectorAll('.drag-bar');
loadImg();
window.addEventListener('resize', loadImg, false);
dragbars.forEach(function(el) {
el.addEventListener('mousedown', lockImg, false);
el.addEventListener('touchstart', lockImg, false);
});
document.addEventListener('mousemove', dragImg, false);
document.addEventListener('touchmove', dragImg, false);
document.addEventListener('mouseup', releaseImg, false);
document.addEventListener('touchend', releaseImg, false);
function loadImg() {
var area = document.getElementsByClassName('drag-area');
warea = parseInt(getComputedStyle(area[0]).getPropertyValue('width'));
var elements = document.querySelectorAll('[class*=drag]');
elements.forEach(function(el) {
\t el.style.height = warea/2 + 'px';
});
var img = document.querySelectorAll('[class*=drag-img]');
img.forEach(function(el) {
\t el.style.width = '50%';
\t el.style.backgroundSize = warea + 'px';
});
dragbars.forEach(function(el) {
\t el.style.left = '49%';
});
};
function lockImg(ev) {
var e = getEvent(ev);
drag = true;
xprev = e.clientX;
locktarget = e.target;
};
function dragImg(ev) {
if (drag) {
\t var e = getEvent(ev);
var x = e.clientX - xprev;
\t \t var imgleft = locktarget.previousElementSibling;
\t var wimgleft = parseInt(getComputedStyle(imgleft).getPropertyValue('width')) + x;
var dragbar = locktarget;
var wbar = parseInt(getComputedStyle(dragbar).getPropertyValue('width'))/2;
var imgright = locktarget.nextElementSibling;
var wimgright = parseInt(getComputedStyle(imgright).getPropertyValue('width')) - x;
var xbound = warea - wbar;
if (wimgleft < wbar || wimgright > xbound) {
wimgleft = wbar;
wimgright = xbound;
}
else if (wimgleft > xbound || wimgright < wbar) {
wimgleft = xbound;
wimgright = wbar;
}
imgleft.style.width = wimgleft + 'px';
dragbar.style.left = wimgleft - wbar + 'px';
imgright.style.width = wimgright + 'px';
xprev = e.clientX;
}
};
function releaseImg() {
drag = false;
xprev = 0;
};
function getEvent(ev) {
return ev.touches ? ev.touches[0] : ev;
};.drag-area {
width: 100%;
position: relative;
overflow: hidden;
}
.drag-area div {
float: left;
}
.drag-bar {
position: absolute;
width: 2%;
cursor: col-resize;
}
.drag-img-left { background: url(https://dgbes.com/images/drag-ff-1.jpg) left top; }
.drag-img-right { background: url(https://dgbes.com/images/drag-ff-2.jpg) right top; }<div class="drag-area">
<div class="drag-img-left"></div>
<img class="drag-bar" src="https://dgbes.com/images/dragbar.png" alt="dragbar" />
<div class="drag-img-right"></div>
</div>
<div class="drag-area">
<div class="drag-img-left"></div>
<img class="drag-bar" src="https://dgbes.com/images/dragbar.png" alt="dragbar" />
<div class="drag-img-right"></div>
</div>