Question

我正在使用以下代码移动div但是在jsfiddle中它很平滑，在我的代码中它是跳跃的并且经验不是最好的。

我想知道我是否在这里跳过某些东西，然后是关于是否有任何特定方式来编码它的问题。例如，它只能用css吗？

HTML

<div id="panel_log"></div>

CSS

#panel_log {
  position:absolute;
  width:100px;
  height:100px;
  border:1px solid #000;
  background-color:#fff;
  top:20px;
  left:20px;
  cursor:move;
}

javsacript

var spaceY;
var spaceX;

var move_start = function(e) {
  var panel_log = document.getElementById('panel_log');
  spaceY = parseInt(window.getComputedStyle(panel_log,null).getPropertyValue('top')) - parseInt(e.clientY);
  spaceX = parseInt(window.getComputedStyle(panel_log,null).getPropertyValue('left')) - parseInt(e.clientX);

  window.addEventListener('mousemove',moving,false);
  window.addEventListener('mouseup',finishing,false);
};

var moving = function(e) {
  var panel_log = document.getElementById('panel_log');
  panel_log.style.top = parseInt(e.clientY) + spaceY + 'px';
  panel_log.style.left = parseInt(e.clientX) + spaceX + 'px';
};

var finishing = function(e) {
  var panel_log = document.getElementById('panel_log');
  window.removeEventListener('mousemove', moving, false);
  window.removeEventListener('mouseup', finishing, false);
};
document.getElementById('panel_log').addEventListener('mousedown',move_start,false);

Answer 1

尝试使用css transform属性而不是left和top https://jsfiddle.net/59sxn1jy/5/

这应该更快，因为transform: translate3d()使用gpu，更多信息http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

这种方法的问题在于您无法轻松获得计算变换值，因此您必须存储位置。

这是代码

＆＃13;

var spaceX, spaceY;

var left = 20;
var top = 20;

var setPosition = function(elem, x, y) {
  elem.style.transform = 'translate3d(' + parseInt(x) + 'px, ' + parseInt(y) + 'px, ' + '0)';
  left = x;
  top = y;
}

setPosition(document.getElementById('panel_log'), left, top)

var move_start = function(e) {
  var panel_log = document.getElementById('panel_log');
      
  spaceX = parseInt(left) - parseInt(e.clientX);
  spaceY = parseInt(top) - parseInt(e.clientY);

  window.addEventListener('mousemove', moving, false);
  window.addEventListener('mouseup', finishing, false);
}

var moving = function(e) {
  var panel_log = document.getElementById('panel_log');
  setPosition(panel_log, parseInt(e.clientX) + spaceX, parseInt(e.clientY) + spaceY)
};

var finishing = function(e) {
  var panel_log = document.getElementById('panel_log');
  window.removeEventListener('mousemove', moving, false);
  window.removeEventListener('mouseup', finishing, false);
};

    document.getElementById('panel_log').addEventListener('mousedown', move_start, false);

＆＃13;

#panel_log {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
  cursor: move;
}

＆＃13;

<div id="panel_log"></div>

＆＃13;

Answer 2

尝试使用jQuery UI：https://jqueryui.com/draggable/

更加顺畅，并提供跨平台支持。请尝试以下方法：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
  $(document).ready(function() {
    $("#panel_log").draggable();
  });
</script>

Answer 3

＆＃13;

function drag_start(event) {
    var style = window.getComputedStyle(event.target);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false);

＆＃13;

#dragme {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color:#fff;
  cursor: move;
  left: 0;
  top: 0;
  position: absolute;
}

body {
  width: 100vw;
  height: 100vh;
}

＆＃13;

<div id="dragme" draggable="true"></div>

＆＃13;

取自this answer。不幸的是，我不相信没有JavaScript就可以做到这一点。

javascript，移动div，什么是最顺利的实现？

3 个答案: