H5拖拽事件-- 自定义创建a标签热区

Posted wxyblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5拖拽事件-- 自定义创建a标签热区相关的知识,希望对你有一定的参考价值。

有两个BUG未更正,

1.拖拽后,动态创建的div始终在鼠标的下方,导致拖拽定位不准确

2.当窗口为自适应时,定位left为百分比,窗口改变大小时会存在定位偏差

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./jquery-1.11.3.min.js"></script>
    <style>
        #zt{
            position: relative;            
        }
        .div01{
            width: 100px;
            height: 100px;
            position: fixed;
            top: 0;
            left: 50%;
            border: 1px solid;
        }
        .test{
            width: 10px;
            height: 10px;
            overflow: hidden;
            cursor: se-resize;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #000000;   
        }
        .div01.boder{
            border:3px solid;
        }
        .warp{
            width: 100%;
            overflow: hidden;
        }
    </style>
    </head>
    <body>
        <div id="zt">
            <div class="warp">
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
                 <br>
            </div>
           
        </div>

<script>
$(function () {     
        //第一部分,动态添加可移动div节点
        $("#zt").prepend(`<i class="add_a_btn" style="font-size: .4rem;background: #ccc;font-style: normal;padding: .1rem  .2rem;border-radius: .2rem;position: fixed;top: 0;left: .4rem;z-index: 999;cursor: pointer;">创建可移动按钮</i>`);
        $("#zt").on("click", ".add_a_btn", function(){

            $(".warp").append(`
                <div class="div01 link-box-area" draggable="true"> 
            <a href="">编辑链接</a>    
                <div class="test"></div>
                <span>&times;</span>
            </div>
            `);
            //每次添加,遍历每个节点挂载触发函数
            $(‘.div01‘).each((i,e) =>{
                 bindResize($(‘.div01‘)[i]);
                 Drag($(‘.div01‘)[i])
            })
       
        //H5拖拽封装
    function Drag(divDrag){          
        // 第二部分,拖拽事件
            // 生命周期
                // 1.鼠标按下,拖拽开始
                // 2.移动鼠标,拖拽中
                // 3.松开鼠标,拖拽结束
            var startX = 0;   //拖拽开始的坐标初始化
            var startY = 0;

            console.log(divDrag.offsetTop)
          
            divDrag.ondragstart = function(event){   //按下的时候必须移动一下
                var event = event || window.event;
                console.log(event)
                console.log(‘拖拽开始‘) 
                console.log(this.offsetTop)
                $(this).addClass(‘boder‘);  //拖拽时候的样式
                startX = event.clientX;     //将开始拖拽时候的坐标赋值
                startY = event.clientY;
            }
            divDrag.ondrag = function(){   //鼠标按下了以后,只要移动一下,这个事件就一直处于触发中
                console.log(‘移动中‘)
            }
            divDrag.ondragend = function(){
                console.log(‘结束‘);
                 console.log(event)
                $(this).removeClass(‘boder‘); //移除拖拽时的样式
                var x = event.clientX - startX;   //结束时候的坐标减去开始时候的坐标,等于移动的距离
                var y = event.clientY - startY;
                this.style.position = ‘absolute‘;
                this.style.top = window.scrollY+event.clientY+"px"; 
                // 自适应宽度转换百分比              
                var _y = divDrag.offsetLeft + x;
                this.style.left= _y/event.view.innerWidth * 100 + ‘%‘               
            } 
    }    
    //第三部分,拖拽改变大小         
         //绑定需要拖拽改变大小的元素对象                  
    function bindResize(el) {
      //初始化参数   
      var els = el.style,
        //鼠标的 X 和 Y 轴坐标   
        x = y = 0; 
        $(el).children(".test").mousedown(function (e) {
        console.log(e)
        //按下元素后,计算当前鼠标与对象计算后的坐标  
        x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight;
        //在支持 setCapture 做些处理 
        el.setCapture ? (
          //捕捉焦点   与.releaseCapture成对出现
          el.setCapture(),
          //设置事件   
          $(el).children(".test").onmousemove = function (ev) {
            mouseMove(ev || event)
          },
          el.onmouseup = mouseUp
        ) : (
          //绑定事件   
          $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
        )
        //防止默认事件发生   
        e.preventDefault()
      });
      //移动事件   
      function mouseMove(e) {
        // 结束时坐标减去初始坐标,赋值给样式
        els.width = e.clientX - x + ‘px‘, //改变宽度
        els.height = e.clientY - y + ‘px‘ //改变高度 
      }
      //停止事件   
      function mouseUp() {
        //在支持 releaseCapture 做些处理
        el.releaseCapture ? (
          //释放焦点   
          el.releaseCapture(),
          //移除事件   
          el.onmousemove = el.onmouseup = null
        ) : (
          //卸载事件   
          $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
        )
      }
        // 移除创建的元素
        $(document).on(‘click‘, ‘.link-box-area span‘, function(){
            $(this).parent().remove();
        })
    } 
    })
})     
</script>  
    </body>
    </html>

 

以上是关于H5拖拽事件-- 自定义创建a标签热区的主要内容,如果未能解决你的问题,请参考以下文章

H5 拖拽操作

H5移动端自定义video播放控件controls(带播放暂停,进度条拖拽)

自定义拖拽

h5学习--七个h5拖拽事件

H5的拖放事件(拖拽删除)

H5标签--“data自定义数据”