pramper/drag-HTML5.html

## drag-HTML5.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    html, body{
      width: 100%;
      height: 100%;
    }
    #box{
        position: absolute;
        width: 200px;
        left: 0;
        top: 0;
    }
    #box-header{
        width: 100%;
        height: 30px;
        background-color: #fcc;
        cursor: move;
    }
    #box-content{
        width: 100%;
        height: 200px;
        background-color: red;
    }
  </style>
</head>
<body>
  <div id="box"  draggable="true">
      <div id="box-header"></div>
      <div id="box-content"></div>
  </div>
  <script>
    var box = document.getElementById('box')
    var body = document.body
    var drag = function() {

      var boxCSS = document.defaultView.getComputedStyle(box, null)
      var innerX, innerY  // 鼠标距别拖曳元素左边界和上边界的距离
      /**
       * @param  {[element]} el:被拖放的元素
       * @param  {[element]} target:拖放的目标元素
       */
      function startDrag(el, target) {
        el.addEventListener("dragstart", function() {
          innerX = event.clientX - parseInt(boxCSS.left)
          innerY = event.clientY - parseInt(boxCSS.top)
        }, false)
        el.addEventListener("dragend", function() {
          this.style.left = event.clientX - innerX + 'px'
          this.style.top = event.clientY - innerY + 'px'
        }, false)
        target.addEventListener("dragenter", function() {
          event.preventDefault()
        }, false)
        target.addEventListener("dragover", function() {
          event.preventDefault()
        }, false)
        target.addEventListener("drop", function() {
          event.preventDefault();
        }, false)
      }
      return startDrag
    }()

    drag(box, body)
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	html, body{
	width: 100%;
	height: 100%;
	}
	#box{
	position: absolute;
	width: 200px;
	left: 0;
	top: 0;
	}
	#box-header{
	width: 100%;
	height: 30px;
	background-color: #fcc;
	cursor: move;
	}
	#box-content{
	width: 100%;
	height: 200px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div id="box" draggable="true">
	<div id="box-header"></div>
	<div id="box-content"></div>
	</div>
	<script>
	var box = document.getElementById('box')
	var body = document.body
	var drag = function() {

	var boxCSS = document.defaultView.getComputedStyle(box, null)
	var innerX, innerY // 鼠标距别拖曳元素左边界和上边界的距离
	/**
	* @param {[element]} el:被拖放的元素
	* @param {[element]} target:拖放的目标元素
	*/
	function startDrag(el, target) {
	el.addEventListener("dragstart", function() {
	innerX = event.clientX - parseInt(boxCSS.left)
	innerY = event.clientY - parseInt(boxCSS.top)
	}, false)
	el.addEventListener("dragend", function() {
	this.style.left = event.clientX - innerX + 'px'
	this.style.top = event.clientY - innerY + 'px'
	}, false)
	target.addEventListener("dragenter", function() {
	event.preventDefault()
	}, false)
	target.addEventListener("dragover", function() {
	event.preventDefault()
	}, false)
	target.addEventListener("drop", function() {
	event.preventDefault();
	}, false)
	}
	return startDrag
	}()

	drag(box, body)
	</script>
	</body>
	</html>