我正在尝试在javascript中制作拖放功能。我几乎已经完成了这个,但是当mousemove
事件被触发时出现了问题。该元素不在指针的位置。我尝试了很多东西,但无法正确设置。这是link of my code。我也在这里提到我的代码结构:
HTML:
<div class="pillers">
<div class="dragable">Randome tet</div>
<div class="dragable">Randome tet</div>
<div class="dragable">Randome tet</div>
<div class="dragable">Randome tet</div>
</div>
<div class="pillers"></div>
<div class="pillers"></div>
<div class="pillers"></div>
JS:
var mouseX = 0,
mouseY = 0,
elmX = 0,
elmY = 0,
tempZ = 0,
currentElm;
$(document).on('mousedown', '.dragable', function(e){
var temp;
$(this).addClass('abs');
mouseX = e.clientX;
mouseY = e.clientY;
temp = +($(this).css('left'));
//temp = $(this).offset().left;
elmX = null || isNaN(temp) ? 0 : temp;
temp = +($(this).css('top'));
//temp = $(this).offset().top
elmY = null || isNaN(temp) ? 0 : temp;
$(this).css({'z-index':'9999'});
currentElm = $(this);
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () { return false; };
// prevent IE from trying to drag an image
$(this).ondragstart = function() { return false; };
// prevent text selection (except IE)
return false;
}).mouseup('.dragable', function(e){
if(currentElm !== null){
currentElm.css({'z-index' : '1'});
currentElm = null;
}
}).mousemove('.dragable', function(e){
if(currentElm !== null){
currentElm.css({
left : (elmX + e.clientX - mouseX)+'px',
top : (elmY + e.clientY - mouseY)+'px'
});
}
});
“拖动”项目未正确设置其位置。这是Link for Codepen
还有一件事......如果我想在pillers
事件中检查鼠标目标是mouseup
等级,应该是什么条件。
答案 0 :(得分:0)
在mousedown事件的函数中未正确声明元素的定位;他们总是零,高于。
因为这些值是元素的声明起始坐标,所以在mousedown上,元素会出现在屏幕的左上角(0,0)。
上述的elmX和elmY部分可以替换为以下内容:
elmX = $(this).offset().left;
elmY = $(this).offset().top;
这允许起始坐标成为发生mousedown时的实际起始位置。
此更改适用于我,在Chrome中。更新后的CodePen。