HTML5拖拽

最新推荐文章于 2023-05-16 23:19:53 发布

花江夏树

最新推荐文章于 2023-05-16 23:19:53 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78529267

版权

传统的拖拽


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .dialog{
            position: absolute;
            left: 100px;
            top: 50px;
            width: 200px;
        }
        .title{
            background: #d7def0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: move;
        }
        .content{
            background: #f0f0f0;
            width: 100%;
            height: 200px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
   <div id="dialog" class="dialog">
       <div id="title" class="title">
           title
       </div>
       <div class="content"></div>
   </div>
<script type="text/javascript">
    var isMouseDown = false;
    var lastPoint = {};

    $('#title').on('mousedown',function (e) {
        isMouseDown = true;
        lastPoint.x = e.pageX;
        lastPoint.y = e.pageY;
    }).on('mousemove',function (e) {
        if (isMouseDown){
            var dialog = $('#dialog');
            var targetX = parseInt(dialog.css('left') )+ e.pageX - lastPoint.x;
            var targetY = parseInt(dialog.css('top')) + e.pageY -lastPoint.y;//限制在窗口内
            if (targetX <= 0){
                targetX = 0;
            }
            if (targetX > $(window).width() - dialog.width()){
                targetX =  $(window).width() - dialog.width();
            }
            if (targetY < 0){
                targetY = 0;
            }
            if (targetY > $(window).height() - dialog.height()){
                targetY = $(window).height() - dialog.height();
            }
            dialog.css('left',targetX +'px');
            dialog.css('top', targetY + 'px');
            lastPoint.x = e.pageX;
            lastPoint.y = e.pageY;
        }
    }).on('mouseup',function () {
        isMouseDown = false;
        lastPoint = {};
    })
</script>
</body>
</html>


clientx 、y

screenX 、Y

pageX. Y会随着滚动条滚动变化参照点在滚动条最左上而client的参照点始终不变

总结：

鼠标点击事件的event对象的一些位置参数
- pageX(Y):相对于整个页面的坐标，包含滚动条滚动的位置
- clientX(Y):相对于浏览器可视区域的坐标
- screenX(Y):相对于电脑屏幕的坐标
- offsetX(Y):鼠标触发点相对于目标事件元素左上角的距离（到边框外边界，IE边框内边界）
- layerX(Y):鼠标触发点相对于offsetParent元素左上角的距离（到边框外边界，IE边框内边界）

HTML5拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        .container{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .containerDrop{
            background-color: green;
        }
        .target{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div id="container" class="container" οndrοp="drop(event)" οndragοver="dragover(event)"
οndragenter="dragenter(event)"  οndragleave="dragleave(event)" οndragend="dragendContainer(event)"></div>
<!--drgagable属性添加到要拖动的目标上-->
<div id="target" class="target" draggable="true" οndragstart="dragstart(event)" οndrag="drag(event)"
     οndragend="dragendTarget(event)"></div>
<img id="image" class="hide" src="imooc.png">
<script>
    var dragstart = function (e) {
       e.dataTransfer.setData('Text',e.target.id);
       //如果想改变拖拽中的区域的样子
        e.dataTransfer.setDragImage($('#image').clone().removeClass('hide')[0],0,0);//$("#image").clone().removeClass('hide')这里是Jquery对象，而要获取dom对象则需要使用[0]来获取。
        //起始坐标 0 0
    };
    var drop = function (e) {
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理。
        e.preventDefault();
        var data = e.dataTransfer.getData('Text');
        e.target.appendChild(document.getElementById(data));//相当于target的div放到container中
    };
    var dragover = function (e) {
        e.preventDefault();
    };
    var dragenter = function (e) {
        e.preventDefault();
        $('#container').addClass('containerDrop');
    };

    var dragleave = function (e) {
        e.preventDefault();
        $('#container').removeClass('containerDrop');
    };
    var dragendContainer = function (e) {
        console.log("dragendContainer")
    };
    var drag = function (e) {
        console.log("drag");
    };
    var dragendTarget = function (e) {
        console.log('dragendTarget');
    }
</script>
</body>
</html>

补充

1、Text只是个字符串，你改成别的也可以，只要跟后面的getData中的字符串保持一致就可以。2、target 事件属性可返回事件的目标节点（触发该事件的节点），语法就是：event.target，因为该事件就是id为target的div出发的，所以它获取到的就是该div。3、preventDefault()取消事件的默认动作，他的默认动作就是粉色的div无法拖进黄色的div中，所以要取消这个默认行为！

e.currentTarget指的是注册了事件监听器的对象，而e.target指的是该对象里的子对象，也是触发这个事件的对象！

ondrop 当target拖到container触发

ondragover阻止默认行为才能拖动进去

ondragenter和ondragleave 添加拖入拖出时绑定的事件

ondrag开始拖拽就触发两个ondragend 未拖入container只打印dragendtarget

问卷生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        .page{
            width: 1000px;
            margin: 0 auto;
        }
        .left{
            width: 500px;
            float: left;
        }
        .left .container{
            padding: 10px;
            min-height: 500px;
            box-sizing: border-box;
        }
        .left .containerDrop{
            background-color: #EEEEEE;
        }
        .left .container h1{
            text-align: center;
        }
        .right{
            width: 500px;
            float: left;
            /*您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/
            box-sizing: border-box;
            border-left: 1px solid red;
        }
        .right .ctrlList{
            padding: 10px;
        }
        .right .ctrlList .box{
            border: 1px dashed gray;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .line{
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="left">
        <div id="container" class="container">
            <h1>问卷</h1>
        </div>
    </div>
    <div class="right">
        <div class="ctrlList">
            <div class="box" draggable="true">
                <div class="line">
                    <span>姓名: </span>
                    <input type="text" name="name" placeholder="请输入真实姓名">
                </div>
            </div>
            <div class="box" draggable="true">
                <div class="line">
                    <span>年龄: </span>
                    <input type="text" name="age" placeholder="请输入年龄">
                </div>
            </div>
            <div class="box" draggable="true">
                <div class="line">
                    <span>性别: </span>
                    <label><input type="radio" name="gender" value="male">男</label>
                    <label><input type="radio" name="gender" value="female">女</label>
                </div>
            </div>
            <div class="box" draggable="true">
                <div class="line">
                    <span>兴趣爱好: </span>
                    <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
                    <label><input type="checkbox" name="hobby" value="football">足球</label>
                    <label><input type="checkbox" name="hobby" value="tennis">网球</label>
                    <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
                    <label><input type="checkbox" name="hobby" value="tabletennis">乒乓球</label>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    <!--不一定要用transfer传数据还可以这样-->
    (function ($) {
        var dragSrc;
        $('.box').each(function (index,ele) {
            $(ele).on('dragstart',function (event) {
                dragSrc = this;
            });
        });
        $('#container').on('drop',function (e) {
            e.preventDefault();
            $(this).append($(dragSrc).find('.line').clone());
            $(this).removeClass('containerDrop');

        }).on('dragover',function (e) {
                e.preventDefault();
        }).on('dragenter',function (e) {
            e.preventDefault();
            $(this).addClass('containerDrop');
        }).on('dragleave',function (e) {
            e.preventDefault();
            $(this).removeClass('containerDrop');
        })
    })(jQuery);
</script>
</body>
</html>

总结：1.给父元素加上margin ：0 auto；子元素会居中

2.添加box-sizing 是防止加了左边框把右边挤下去

实现的一个拼图小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        ul{
            width: 600px;
        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li draggable="true"><img src="images/2.jpg"></li>
        <li draggable="true"><img src="images/1.jpg"></li>
        <li draggable="true"><img src="images/5.jpg"></li>
        <li draggable="true"><img src="images/6.jpg"></li>
        <li draggable="true"><img src="images/4.jpg"></li>
        <li draggable="true"><img src="images/9.jpg"></li>
        <li draggable="true"><img src="images/8.jpg"></li>
        <li draggable="true"><img src="images/7.jpg"></li>
        <li draggable="true"><img src="images/3.jpg"></li>
    </ul>
</div>
<script>
    (function ($) {
        var dragSrc;
        $('li').each(function (index,ele) {
            $(ele).on('dragstart',function (e) {
                dragSrc = this;
                e.originalEvent.dataTransfer.setData('text/html',this.innerHTML)
            }).on("dragover",function (e) {
                e.preventDefault();
            }).on('drop',function (e) {
                if(dragSrc != this){//dragSrc 是指要移动的li  这里的this是原本就在那的li
                    dragSrc.innerHTML = this.innerHTML;
                    this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
                }
            })
        })
    })(jQuery);
</script>
</body>
</html>

总结：

1.jquery中的e是进行了封装了的，dataTransfer不是绑定在e上，而是绑定在e的原始event上，所以要加上originalEvent，获取到原始的e。

文件拖拽上传

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>drag</title>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .container {
      width: 400px;
      height: 300px;
      margin: 100px auto;
      border: 2px dashed black;
      box-sizing: border-box;
      overflow: auto;/*多出部分出现滚动条*/
    }
    .containerDrag {
      border: 2px dashed #B0E24B;
    }
    .tips {
      line-height: 290px;
      text-align: center;
    }
    .file {
      width: 100%;
      height: 40px;
      display: block;
      position: relative;
      list-style-type: none;
    }
    .text {
      line-height: 40px;
      font-size: 20px;
      position: relative;
      z-index: 2;/*不希望被进度条挡住*/
      padding-left: 10px;
    }
    .progress {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 0%;
      height: 100%;
      background-color: #B0E24B;
    }
    .loading, .right {
      display: inline-block;
      width: 30px;
      height: 30px;
      vertical-align: middle;
      padding-right: 10px;
    }
    .loading {
      background: url('images/loading.png') no-repeat;
    }
    .right {
      background: url('images/right.png') no-repeat;
    }
    .wrong {
      background: url('images/wrong.png') no-repeat;
    }
    .none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <div class="tips" id="tips">拖动文件至此区域，即可上传</div>
    <ul class="none" id="files">
    </ul>
  </div>
  <div id="template" class="none">
    <li class="file">
      <!--显示文件名和图标-->
      <span class="text"><span class="loading"></span><span class="name">aaa</span></span>
      <div class="progress"></div>
    </li>
  </div>
  <script>
    (function($) {
      
      $("#container")[0].ondragenter = function() {
        if(!$("#tips").hasClass("none")) {
          $("#tips").text("松开鼠标，即可上传");
        }
        $("#container").addClass("containerDrag");
      }
      
      $("#container")[0].ondragleave = function() {
        if(!$("#tips").hasClass("none")) {
          $("#tips").text("拖动文件至此区域，即可上传");
        }
        $("#container").removeClass("containerDrag");
      }
      
      $("#container")[0].ondragover = function(e) {
        e.preventDefault();
      }
      
      $("#container")[0].ondrop = function(e) {
        e.preventDefault();
        if(!$("#tips").hasClass("none")) {
          $("#tips").addClass("none");
          $("#files").removeClass("none");
        }
        $("#container").removeClass("containerDrag");
        var files = e.dataTransfer.files;
        for (var i = 0; i < files.length; i++)/*有可能一次传了多个文件*/
        {
          var file = files[i];
          var li = $("#template li").clone();
          var icon = li.find(".loading");
          var name = li.find(".name");
          var progress = li.find(".progress");
          name.text(file.name);
          $("#files").append(li);
          //simuUpload(file, progress, icon);
          upload(file, progress, icon);
        }
      }
      
      var simuUpload = function(file, progressEle, iconEle) {
        var progress = 0;
        var timer = setInterval(function() {
          progress = progress + Math.floor(Math.random() * 3);
          if(progress <= 100) {
            progressEle.css('width', progress + '%');
          } else {
            clearInterval(timer);
            progressEle.css('width', '0px');
            iconEle.removeClass('loading').addClass('right');
          }
        }, 100);
      }
      
      var upload = function(file, progressEle, iconEle) {
        var fd = new FormData();
        fd.append("pic", file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'file:///C:/Users/admin/Desktop/新建文件夹/H5拖拽/文件上传拖拽/upload.php', true);
        xhr.upload.onprogress = function (e) {
          percent = 100 * e.loaded / e.total;
          progressEle.css('width', percent + '%');
        }
        xhr.onload = function() {
          if (xhr.status === 200) {
            progressEle.css('width', '0px');
            iconEle.removeClass('loading').addClass('right');
          } else {
            iconEle.removeClass('loading').addClass('wrong');
          }
        }
        xhr.send(fd);
      }
    
    })(jQuery);
  </script>
</body>
</html>