2019-06-05 HTML5 拖拽上传

$('#title').on("mousedown",function(e){
  console.log(e);
})

e包含了：（鼠标点击部分的四种方式）

相对于页面显示部分的左上角的定位（滚动条隐藏部分也算）
pageX
pageY

相对于页面显示部分的左上角的定位（可见范围内）
clientX
clientY

相对于当前元素的左上角的位置
offsetX
offsetY

相对于屏幕的左上角的位置
screenX
screenY

HTML5拖拽

在HTML标签上写一句：draggable=“true”
一个很好用的jq拖动插件

http://pep.briangonzalez.org/
skdding.github.io/dragdealer/

比如滑块，图片轮播，都可以用到这些插件

<div id="container" class="container"></div>
  <div id="target" class="target" draggable="true"></div>
  <img id="image" src="imooc.png" class="hide" />
  <script>
    (function($) {
    
      $("#container")[0].ondrop = function(e) {
        e.preventDefault();
        console.log(e.dataTransfer);
        var id = e.dataTransfer.getData("Text");
        $(this).append($('#' + id));
      };
      
      $("#container")[0].ondragover = function(e) {
        e.preventDefault();
      };
      
      $("#container")[0].ondragenter = function(e) {
        e.preventDefault();
        $(this).addClass("containerDrop");
      };
      
      $("#container")[0].ondragleave = function(e) {
        e.preventDefault();
        $(this).removeClass("containerDrop");
      };
      
      $("#target")[0].ondragstart = function(e) {
        console.log(e.dataTransfer);
        e.dataTransfer.setData("Text", e.target.id);
        e.dataTransfer.setDragImage($("#image").clone().removeClass("hide")[0], 0, 0);
      };
      
      $("#target")[0].ondrag = function(e) {
        console.log('drag');
      }
      
      $("#target")[0].ondragend = function(e) {
        console.log('dragend');
      }
    
    })(jQuery);
    
  </script>