跨浏览器兼容js拖动事件，兼容ie7

2018-1-7 23:52:03 2,953 views

普通版


跨浏览器兼容拖动事件，兼容ie7.可以拖动文本在2个div框中来回拖动

html代码

你可以在2个div框中来回拖动
    <div id="wrap">
      <div id="sou" style="width: 100px;height: 100px;margin-right: 40px;border: 1px solid black;float:  left;">
        <p id="txt" draggable="true" style="text-align: center;margin-top: 30px;">这是测试文本</p>
      </div>
      <div id="tar" style="width: 100px;height: 100px;border: 1px solid black;float: left;">
      </div>
    </div>

js代码

<script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base();
      var txt = document.getElementById("txt");
      var tar = document.getElementById("tar");
      var sou = document.getElementById("sou");
      var wrap = document.getElementById("wrap");
      txt.onmousedown = function(event) {
        if(this.dragDrop) {
          this.dragDrop();//兼容ie9以下不能拖动元素的解决办法,给当前元素绑定onmousedown 事件，
//并调用dragDrop（）方法
        }
      };
      //
      txt.ondragstart = function(event) {
        event = base.getEvent(event);
       event.dataTransfer.setData("text", this.id); //直接传this有问题，因为前面是text,只能传文本，
//不能传对象,火狐中必须要设置数据,不然要多次点击才能拖动
        //第一个值只能为text或者URL
      };
      var fn = function(event) {
        event = base.getEvent(event);
        switch(event.type) {
          case "dragenter":
            base.preventDefault(event);
            break;
          case "dragover":
            base.preventDefault(event); //取消默认事件，让ondrop能够触发
            break;
//重写ondragover和ondragenter并取消默认事件，可以让任何元素都可以拖动
          case "drop":
            base.preventDefault(event); //阻止火狐的拖拽打开新的链接
            base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
          var data = event.dataTransfer.getData("text");
 if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
 var a = document.getElementById(data);
 target.appendChild(a);
 }
            break;
        }
      }
      wrap.ondragenter = fn;
      wrap.ondragover = fn;
      wrap.ondrop = fn;
    </script>

 
 
 

完整代码

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {}
    </style>
  </head>
  <body>
    你可以在2个div框中来回拖动
    <div id="wrap">
      <div id="sou" style="width: 100px;height: 100px;margin-right: 40px;border: 1px solid black;float:  left;">
        <p id="txt" draggable="true" style="text-align: center;margin-top: 30px;">这是测试文本</p>
      </div>
      <div id="tar" style="width: 100px;height: 100px;border: 1px solid black;float: left;">
      </div>
    </div>
    <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base();
      var txt = document.getElementById("txt");
      var tar = document.getElementById("tar");
      var sou = document.getElementById("sou");
      var wrap = document.getElementById("wrap");
      txt.onmousedown = function(event) {
        if(this.dragDrop) {
          this.dragDrop();
        }
      };
      //
      txt.ondragstart = function(event) {
        event = base.getEvent(event);
        event.dataTransfer.setData("text", this.id); //直接传this有问题，因为前面是text,只能传文本，不能传对象,火狐中必须要设置数据,不然要多次点击才能拖动
        //第一个值只能为text或者URL
      };
      var fn = function(event) {
        event = base.getEvent(event);
        var target = base.getTarget(event);
        switch(event.type) {
          case "dragenter":
            base.preventDefault(event);
            break;
          case "dragover":
            base.preventDefault(event); //取消默认事件，让ondrop能够触发
            break;
          case "drop":
            base.preventDefault(event); //阻止火狐的拖拽打开新的链接
            base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
            var data = event.dataTransfer.getData("text");
            if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
              var a = document.getElementById(data);
              target.appendChild(a);
            }
            break;
        }
      }
      wrap.ondragenter = fn;
      wrap.ondragover = fn;
      wrap.ondrop = fn;
    </script>
  </body>
</html>

 
 

带颜色版本

test
可以在拖动时来回切换颜色

html代码

你可以在2个div框中来回拖动
    <div id="wrap">
      <div id="sou" style="width: 100px;height: 100px;margin-right: 40px;border: 1px solid black;float:  left;">
        <p id="txt" draggable="true" style="text-align: center;margin-top: 30px;">这是测试文本</p>
      </div>
      <div id="tar" style="width: 100px;height: 100px;border: 1px solid black;float: left;">
      </div>
    </div>

 
 

js代码

var base = new Base();
      var txt = document.getElementById("txt");
      var tar = document.getElementById("tar");
      var sou = document.getElementById("sou");
      var wrap = document.getElementById("wrap");
      txt.onmousedown = function(event) {
        if(this.dragDrop) {
          this.dragDrop();
        }
      };
      txt.ondragstart = function(event) {
        var ua = base.browserName();
        event = base.getEvent(event);
        event.dataTransfer.setData("text", this.id); //直接传this有问题，因为前面是text,只能传文本，不能传对象,火狐中必须要设置数据,不然要多次点击才能拖动
        //第一个值只能为text或者URL
      };
      sou.ondragenter = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
        this.style.backgroundColor = "blue";
      };
      sou.ondragover = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
      };
      sou.ondragleave = function(event) {
        this.style.backgroundColor = "";
      };
      sou.ondrop = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event); //阻止火狐的拖拽打开新的链接
        base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
        var data = event.dataTransfer.getData("text");
        var target = base.getTarget(event);
        if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
          var a = document.getElementById(data);
          target.appendChild(a);
        }
      };
      tar.ondragenter = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
        this.style.backgroundColor = "red";
      };
      tar.ondragover = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
      };
      tar.ondragleave = function(event) {
        this.style.backgroundColor = "";
      };
      tar.ondrop = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event); //阻止火狐的拖拽打开新的链接
        base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
        var data = event.dataTransfer.getData("text");
        var target = base.getTarget(event);
        if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
          var a = document.getElementById(data);
          target.appendChild(a);
        }
      };

 

完整html代码

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {}
    </style>
  </head>
  <body>
    你可以在2个div框中来回拖动
    <div id="wrap">
      <div id="sou" style="width: 100px;height: 100px;margin-right: 40px;border: 1px solid black;float:  left;">
        <p id="txt" draggable="true" style="text-align: center;margin-top: 30px;">这是测试文本</p>
      </div>
      <div id="tar" style="width: 100px;height: 100px;border: 1px solid black;float: left;">
      </div>
    </div>
    <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var base = new Base();
      var txt = document.getElementById("txt");
      var tar = document.getElementById("tar");
      var sou = document.getElementById("sou");
      var wrap = document.getElementById("wrap");
      txt.onmousedown = function(event) {
        if(this.dragDrop) {
          this.dragDrop();
        }
      };
      txt.ondragstart = function(event) {
        var ua = base.browserName();
        event = base.getEvent(event);
        event.dataTransfer.setData("text", this.id); //直接传this有问题，因为前面是text,只能传文本，不能传对象,火狐中必须要设置数据,不然要多次点击才能拖动
        //第一个值只能为text或者URL
      };
      sou.ondragenter = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
        this.style.backgroundColor = "blue";
      };
      sou.ondragover = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
      };
      sou.ondragleave = function(event) {
        this.style.backgroundColor = "";
      };
      sou.ondrop = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event); //阻止火狐的拖拽打开新的链接
        base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
        var data = event.dataTransfer.getData("text");
        var target = base.getTarget(event);
        if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
          var a = document.getElementById(data);
          target.appendChild(a);
        }
      };
      tar.ondragenter = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
        this.style.backgroundColor = "red";
      };
      tar.ondragover = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event);
      };
      tar.ondragleave = function(event) {
        this.style.backgroundColor = "";
      };
      tar.ondrop = function(event) {
        event = base.getEvent(event);
        base.preventDefault(event); //阻止火狐的拖拽打开新的链接
        base.stopPropagation(event); //阻止火狐的拖拽打开新的链接
        var data = event.dataTransfer.getData("text");
        var target = base.getTarget(event);
        if(target.id != data) { //拖动一下但是仍然在源对象不放入目标对象中时
          var a = document.getElementById(data);
          target.appendChild(a);
        }
      };
    </script>
  </body>
</html>

 

0
Tags: ,
分
享
到

分享到微信朋友圈

打开微信，点击底部的“发现”，
使用“扫一扫”即可将网页分享至朋友圈。