JavaScript有虚线框的拖动

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了元素拖动效果。

在拖动的时候具有一个虚线框在移动,当松开鼠标虚线框消失,原来的元素会被放置于此。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#box1 {
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: yellow;
  position: absolute;
  cursor: move;
}
#box2 {
  width: 100px;
  height: 100px;
  border: 1px dashed #000000;
  position: absolute;
  cursor: move;
}
</style>
<script>
window.onload = function() {
  var box1 = document.getElementById("box1");
  box1.onmousedown = function(event) {
    var e = event || window.event;
    var disX = e.clientX - box1.offsetLeft;
    var disY = e.clientY - box1.offsetTop;
    var maxL = document.documentElement.clientWidth - box1.offsetWidth;
    var maxT = document.documentElement.clientHeight - box1.offsetHeight;
    //创建一个新的div
    var box2 = document.createElement("div");
    box2.id = "box2";
    box2.style.left = box1.offsetLeft + "px";
    box2.style.top = box1.offsetTop + "px";
    document.documentElement.appendChild(box2);
    document.onmousemove = function (event) {
      var e = event || window.event;
      var l = e.clientX - disX;
      var t = e.clientY - disY;
      if (l <= 0) {
        l = 0;
      }
      if (t <= 0) {
        t = 0;
      }
      if (l >= maxL) {
        l = maxL;
      }
      if (t >= maxT) {
        t = maxT
      }
      box2.style.left = l + "px";
      box2.style.top = t + "px";
    };
    box2.onmouseup = function() {
      box1.style.left = box2.style.left;
      box1.style.top = box2.style.top;
      document.documentElement.removeChild(box2);
      box2.onmousemove = null;
      box2.onmouseup = null;
    };
  }
}
</script>
</head>
<body>
<div id="box1">犀牛前端部落</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function() {},文档内容完全加载完毕再去执行函数中的代码。

(2).var box1 = document.getElementById("box1"),获取id属性值为box1的元素对象。

(3).box1.onmousedown = function(event) {},为box1元素注册onmousedown事件处理函数。

(4).var e = event || window.event,兼容所有浏览器的时间对象。

(5).var disX = e.clientX - box1.offsetLeft,获取当前鼠标指针距离元素左侧的距离。

(6).var disY = e.clientY - box1.offsetTop,获取当前鼠标指针距离元素上侧的距离。(7).var maxL = document.documentElement.clientWidth - box1.offsetWidth,元素可以向右拖动的最大值。

(8).var maxT = document.documentElement.clientHeight - box1.offsetHeight,元素可以向上拖动的最大值。

(9).var box2 = document.createElement("div"),创建虚线框div元素。

(10). box2.id = "box2",设置虚线框div元素的id属性值。

(11).box2.style.left = box1.offsetLeft + "px",设置box2元素的left属性值

(12).box2.style.top = box1.offsetTop + "px",设置box2的top属性值。

(13). document.documentElement.appendChild(box2),将此box2添加的页面。

(14).document.onmousemove = function (event) {

  var e = event || window.event;

  var l = e.clientX - disX;

  var t = e.clientY - disY;

  if (l <= 0) {

    l = 0;

  }

  if (t <= 0) {

    t = 0;

  }

  if (l >= maxL) {

    l = maxL;

  }

  if (t >= maxT) {

    t = maxT

  }

  box2.style.left = l + "px";

  box2.style.top = t + "px";

},将box2元素的可以拖动范围限定在浏览器客户区。

之所以将onmousemove 事件处理函数注册在document上是为了防止快速拖动导致鼠标脱离元素,失去拖动效果。

(15).box2.onmouseup = function() {

  box1.style.left = box2.style.left;

  box1.style.top = box2.style.top;

  document.documentElement.removeChild(box2);

  box2.onmousemove = null;

  box2.onmouseup = null;

},当鼠标松开的时候,将box1的位置设置为当前box2的位置。

然后删除box2,并解绑事件处理函数。

二.相关阅读:

(1).document.getElementById()可以参阅document.getElementById()一章节。

(2).onmousedown事件可以参阅JavaScript mousedown事件一章节。

(3).clientX可以参阅JavaScript event.clientX一章节。

(4).offsetLeft可以参阅offsetleft一章节。

(5).clientWidth可以参阅clientWidth一章节。

(6).offsetWidth可以参阅js offsetWidth一章节。

(7).document.createElement()可以参阅document.createElement()一章节。

(8).appendChild()可以参阅appendChild()一章节。

(9).onmousemove事件可以参阅javascript mousemove事件一章节。

(10).onmouseup事件可以参阅javascript mouseup事件一章节。

(11).removeChild()可以参阅javascript removeChild()一章节。

JavaScript有虚线框的拖动,这样的场景在实际项目中还是用的比较多的,关于JavaScript有虚线框的拖动就介绍到这了。

JavaScript有虚线框的拖动属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容