zoukankan      html  css  js  c++  java
  • H5拖拽事件-- 自定义创建a标签热区

    有一个BUG未更正,

    1.当窗口为自适应时,定位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{
                 100px;
                height: 100px;
                position: fixed;
                top: 0;
                left: 50%;
                border: 1px solid;
            }
            .test{
                 10px;
                height: 10px;
                overflow: hidden;
                cursor: se-resize;
                position: absolute;
                right: 0;
                bottom: 0;
                background-color: #000000;   
            }
            .div01.boder{
                border:3px solid;
            }
            .warp{
                 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;
                var starsetY= 0;   //鼠标位于div内的y轴位置初始化
                console.log(divDrag.offsetTop)
              
                divDrag.ondragstart = function(event){   //按下的时候必须移动一下
                    var event = event || window.event;
                    console.log(event)
                    console.log('拖拽开始') 
                   
                    $(this).addClass('boder');  //拖拽时候的样式
                    startX = event.clientX;     //将开始拖拽时候的坐标赋值
                    startY = event.clientY;
                    starsetY= event.offsetY     //鼠标位于div内的y轴位置
                }
                divDrag.ondrag = function(){   //鼠标按下了以后,只要移动一下,这个事件就一直处于触发中
                    console.log('移动中');
                    console.log(event)
                }
                divDrag.ondragend = function(){
                    console.log('结束');
                    $(this).removeClass('boder'); //移除拖拽时的样式
                    var x = event.clientX - startX;   //结束时候的坐标减去开始时候的坐标,等于移动的距离
                    var y = event.clientY - startY;
                    this.style.position = 'absolute';
                    //滚轮高度+div离屏幕的距离 - 鼠标在div内的y轴距离 = 拖拽后的top值
                    this.style.top = window.scrollY+event.clientY-starsetY+"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>

        <!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{            100px;            height: 100px;            position: fixed;            top: 0;            left: 50%;            border: 1px solid;        }        .test{            10px;            height: 10px;            overflow: hidden;            cursor: se-resize;            position: absolute;            right: 0;            bottom: 0;            background-color: #000000;           }        .div01.boder{            border:3px solid;        }        .warp{            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;            var starsetY= 0;   //鼠标位于div内的y轴位置初始化            console.log(divDrag.offsetTop)                      divDrag.ondragstart = function(event){   //按下的时候必须移动一下                var event = event || window.event;                console.log(event)                console.log('拖拽开始')                                $(this).addClass('boder');  //拖拽时候的样式                startX = event.clientX;     //将开始拖拽时候的坐标赋值                startY = event.clientY;                starsetY= event.offsetY     //鼠标位于div内的y轴位置            }            divDrag.ondrag = function(){   //鼠标按下了以后,只要移动一下,这个事件就一直处于触发中                console.log('移动中');                console.log(event)            }            divDrag.ondragend = function(){                console.log('结束');                $(this).removeClass('boder'); //移除拖拽时的样式                var x = event.clientX - startX;   //结束时候的坐标减去开始时候的坐标,等于移动的距离                var y = event.clientY - startY;                this.style.position = 'absolute';                //滚轮高度+div离屏幕的距离 - 鼠标在div内的y轴距离 = 拖拽后的top值                this.style.top = window.scrollY+event.clientY-starsetY+"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>

  • 相关阅读:
    PWNABLE Silver Bullet
    PWNABLE hacknote
    PWNABLE calc
    vue如何监听浏览器的返回,并进行操作
    字符串的拼接和截取例子
    关于vue在url上向后台动态传递参数
    鼠标移动到超链接上时变为手型
    vue.js 单选框根据v-bind:disabled="条件" 来动态修改多个单选框是否只读
    关于node重装后启动项目报错
    关于在下名字问题的研究报告
  • 原文地址:https://www.cnblogs.com/wxyblog/p/11977783.html
Copyright © 2011-2022 走看看