Question

我正在尝试在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等级，应该是什么条件。

Answer 1

在mousedown事件的函数中未正确声明元素的定位;他们总是零，高于。

因为这些值是元素的声明起始坐标，所以在mousedown上，元素会出现在屏幕的左上角（0,0）。

上述的elmX和elmY部分可以替换为以下内容：

elmX = $(this).offset().left;
elmY = $(this).offset().top;

这允许起始坐标成为发生mousedown时的实际起始位置。

此更改适用于我，在Chrome中。更新后的CodePen。

在javascript中拖放

1 个答案: