美文网首页
H5 - ContentEditable - Draggable

H5 - ContentEditable - Draggable

作者: Veycn | 来源:发表于2019-03-29 11:16 被阅读0次

    ContentEditable

    当鼠标点击div,它就变成了一个input框, 可以进行输入。没有兼容性问题。一般用来做可以修改的表格。
    这个属性是可以继承的, 在这个div里面的所有子标签里面的文本都可以编辑。除非给子标签设置此属性为false。但是可以将整个标签的内容,连带标签看作一个整体删除.

    dragable

    旁边的比左边的颜色要淡,就是拖拽出来的一个虚影。chrome, safari支持,firefox只有少数几个版本支持


    a, img标签的默认dragable是打开的
    拖拽的生命周期:开始拖拽,拖拽进行中, 拖拽结束
    被拖拽物体, 目标区域
        var demo = document.getElementById('demo')
        demo.ondragstart = function(e){
          console.log(e)
        }
        demo.ondragend = function(e){
          console.log(e)
        }
    

    两次e中的clientXclientY分别代表的起始位置和最终位置

        将一个方块拖到指定位置
        var demo = document.getElementById('demo')
        var beginX = 0
        var beginY = 0
        demo.ondragstart = function(e){
          beginX = e.clientX
          beginY = e.clientY
        }
        demo.ondragend = function(e){
          var x = e.clientX - beginX
          var y = e.clientY - beginY
          demo.style.left = demo.offsetLeft + x + 'px'
          demo.style.top = demo.offsetTop + y + 'px'
        }
    

    针对被拖拽元素
    ondragstart: 鼠标按下开始移动后触发
    ondrag: 拖动过程中触发
    ondragend: 拖动之后鼠标松开触发
    针对目标元素
    ondragenter: 当鼠标进入指定区域的时候才会触发
    ondragover:被拖拽元素在指定区域晃动拖动的元素时触发
    ondragleave: 当被拖拽元素离开的时候触发
    ondrop: 当拖拽放下时...也不会触发。事件是由行为触发的,一个行为可能会触发多个事件。
    A => B => CA触发之后触发BB触发之后触发C,要想阻止C事件,必须在B后边。
    要触发此事件, 需要在over事件里面阻止默认事件,因为拖拽周期结束的默认事件是回到原处。over的时候,基本上被拖拽元素已经到位了,即将松开鼠标, 这时候阻止默认事件(e.preventDefault())是有效的。阻止了默认事件之后, 先触发此事件, 然后触发被拖拽元素的end事件。

    拖拽小demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        .box1{
          width: 200px;
          height: auto;
          margin: 100px 0 0 100px;
          border: 1px solid #ccc;
          min-height: 30px;
        }
        li {
          width: 150px;
          height: 30px;
          margin: 10px auto;
          background: #abcdef;
          list-style: none;
        }
        .box2{
          position: absolute;
          top: 100px;
          left: 500px;
          width: 200px;
          min-height: 30px;
          height: auto;
          border: 1px solid #ccc;
        }
      </style>
    </head>
    <body>
      <div class="box1">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="box2">
      </div>
      <script>
        var liList = document.getElementsByTagName('li')
        var dragDom = null
        for(var i = 0; i < liList.length; i ++){
          liList[i].setAttribute('draggable', true)
          liList[i].ondragstart = function(e){
            dragDom = e.target
          }
        }
        var target = document.getElementsByClassName('box2')[0]
        target.ondragover = function(e){
          e.preventDefault()
        }
        target.ondrop = function(e){
          console.log(e)
          target.appendChild(dragDom)
          dragDom = null;
        }
      </script>
    </body>
    </html>
    

    dataTransfer

    兼容性很不好的一个属性

    ele.ondragstart = function(e){
      e.dataTransfer.effectAllowed = "link"
    }
    ele.ondrop = function(e){
      e.dataTransfer.dropEffect = "link"
    }
    

    一个只能在ondragstart中设置, 另一个只能在ondrop中设置。改变对应时候鼠标的指针样式。还分操作系统, 因为鼠标的样式是操作系统决定的。link, copy, move, copymove, linkmove, all可以选择。但是一般不会用。

    相关文章

      网友评论

          本文标题:H5 - ContentEditable - Draggable

          本文链接:https://www.haomeiwen.com/subject/ggmkbqtx.html