h5实现拖拽与js实现拖拽效果

发布文章博文管理我的博客退出TrashTempCSS样式CSS样式CSS样式CSS样式ES6小结ES6小结ES6小结h5实现拖拽与js实现拖拽效果this.$nextTick与Vue.nextTick...

超小盆友的媳妇儿

3140人浏览 · 2019-01-07 18:46:48

超小盆友的媳妇儿 · 2019-01-07 18:46:48 发布

今天超级闲啊~
想起之前有页面实现的拖拽觉得很有意思啊！
自己学习下来玩一玩
首先是网上很多的js实现拖拽，本人没怎么用过jquery，在这里分享两个比较有意思的拖拽代码，当然不是我写的，摘取大神的代码：
1、一个div简单的拖拽


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    .box{

      width: 100px;

      height: 100px;

      background: #03ccbb;

      position: absolute;

      left: 0;

      top: 0;

    }

  </style>

</head>

<body style="height: 3000px;">

<div class="box"></div>



<script>

  //获取盒子

  var ele = document.querySelector('.box');



  // 移动最大宽高

  var maxW = document.documentElement.clientWidth - ele.offsetWidth;

  var maxH = document.documentElement.offsetHeight - ele.offsetHeight;



  ele.onmousedown=function(e){//在元素上按下鼠标

    e = e||window.event;

    //记录鼠标按下时，到元素边缘的距离

    var nX = e.offsetX;

    var nY = e.offsetY;



    document.onmousemove=function(e){//在document范围移动鼠标

      e = e||window.event;

      //计算元素的偏移量

      var nLeft = e.pageX - nX;

      var nTop = e.pageY - nY;



      //限制元素的最大最小偏移量

      nLeft = Math.min(maxW,Math.max(0,nLeft));

      nTop = Math.min(maxH,Math.max(0,nTop));





      ele.style.left = nLeft+"px";

      ele.style.top = nTop+"px";

    }

  }

  // 鼠标已开，move事件消失

  document.onmouseup=function(){

    document.onmousemove = null;

  }

</script>



</body>

</html>

2、一个有意思一点的拖拽和效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      width: 496px;
    }

    ul li {
      list-style: none;
      width: 60px;
      height: 60px;
      border: 1px solid red;
      float: left;
    }
    /*清除浮动*/

    ul::after {
      content: "";
      clear: both;
      display: block;
    }

    .bg {
      background: skyblue;
    }

    .bg2 {
      position: absolute;
      background: red;
      width: 60px;
      height: 60px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

</head>

<body>
<div class="div">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<script>
  var posArr = []
  for (var i = 0; i < $("ul li").length; i++) {
    posArr.push({
      x: $("ul li").eq(i).offset().left,
      y: $("ul li").eq(i).offset().top
    })
  }


  $("ul li").on("mouseover", function () {
    var index = $(this).index()
    $(this).parent().addClass("bg")
    $("ul").each(function () {
      $(this).find("li").eq(index).addClass("bg")
    })
  })
  $("ul li").on("mouseout", function () {
    var index = $(this).index()
    $(this).parent().removeClass("bg")
    $("ul").each(function () {
      $(this).find("li").eq(index).removeClass("bg")
    })
  })
  $("ul li").on("click", function (e) {
    var oDiv = $("<div class='bg2'></div>")

    oDiv.css({
      "left": $(this).offset().left + 1,
      "top": $(this).offset().top + 1
    })
    $(".div").append(oDiv)
    var disY = 0;
    var disX = 0;
    oDiv.mousedown(function (ev) {
      var result = {
        index: 0
      }
      disX = ev.pageX - $(this).offset().left;
      disY = ev.pageY - $(this).offset().top;
      $(document).mousemove(function (ev) {
        oDiv.css('left', ev.pageX - disX);
        oDiv.css('top', ev.pageY - disY);
      })
      $(document).mouseup(function (e) {

        for (var i = 0; i < posArr.length; i++) {
          var x = posArr[i].x - oDiv.offset().left;
          var y = posArr[i].y - oDiv.offset().top;
          x = x > 0 ? x : -x;
          y = y > 0 ? y : -y;
          var temp = x + y;
          if (i == 0) { //第一次进来赋值
            result.x = i;
            result.y = temp;
          } else {
            if (result.y > temp) {
              result.index = i;
              result.y = temp;
            }
          }
        }
        oDiv.css('left', posArr[result.index].x + 1);
        oDiv.css('top', posArr[result.index].y + 1);
        $(document).off();
      })
      return false;
    })
  })

</script>

</body>

</html>

最后就是h5实现拖拽，觉得也是最简单的：

在两个矩形中来回拖动p元素的内容

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
 <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "开始拖动 p 元素";
}
function allowDrop(event) {
    event.preventDefault();       //告诉浏览器取消默认事件
}
function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    document.getElementById("demo").innerHTML = " p 元素已被拖动";
}
</script></body>
</html>

注意：在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^