一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置

如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。

1.onmousedown：鼠标按下事件
2.onmousemove：鼠标移动事件
3.onmouseup：鼠标抬起事件

重点：

1、一定要绝对定位，脱离文档流才可以移动。

2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。

3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。

移动：通过 a - c 建立鼠标与div的关系，防止鼠标超出div。

基本思路：

拖拽状态 = 0鼠标在元素上按下的时候{

  拖拽状态 = 1

  记录下鼠标的x和y坐标

  记录下元素的x和y坐标

  }

鼠标在元素上移动的时候{

  如果拖拽状态是0就什么也不做。

  如果拖拽状态是1，那么

  元素y = 现在鼠标y - 原来鼠标y + 原来元素y

  元素x = 现在鼠标x - 原来鼠标x + 原来元素x

  }

鼠标在任何时候放开的时候{

  拖拽状态 = 0

}

贴上代码：

    <div class="box" id="drag"></div>

        .box{position: absolute;width: 100px;height: 100px;background: red;cursor: move;}

        window.onload = function(){var drag = document.getElementById('drag');// //点击某物体时，用drag对象即可，move和up是全局区域，// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  drag.onmousedown = function(event){var event = event || window.event;  //兼容IE浏览器//    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离var diffX = event.clientX - drag.offsetLeft;var diffY = event.clientY - drag.offsetTop;if(typeof drag.setCapture !== 'undefined'){drag.setCapture(); }document.onmousemove = function(event){var event = event || window.event;var moveX = event.clientX - diffX;var moveY = event.clientY - diffY;if(moveX < 0){moveX = 0}else if(moveX > window.innerWidth - drag.offsetWidth){moveX = window.innerWidth - drag.offsetWidth}if(moveY < 0){moveY = 0}else if(moveY > window.innerHeight - drag.offsetHeight){moveY =  window.innerHeight - drag.offsetHeight}drag.style.left = moveX + 'px';drag.style.top = moveY + 'px'}document.onmouseup = function(event){this.onmousemove = null;this.onmouseup = null;//修复低版本ie bug  if(typeof drag.releaseCapture!='undefined'){  drag.releaseCapture();  }  }}}

二.HTML5元素拖拽drag与拖放drop

元素拖拽

浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性

   <div class="box1" draggable="true" id="source"></div>

拖拽事件

拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件

    <div class="box1" draggable="true" id="source"></div><br><div class="box2" id="target"></div>

拖拽元素

拖拽元素的时候，被拖拽元素会触发以下事件

dragstart
drag
dragend

当鼠标点中元素并且开始移动时，就会触发dragstart事件（类比mousedown）
拖拽过程中会持续不断地触发drag事件（类比mousemove）
松开鼠标取消拖拽时就会触发dragend事件（类比mouseup）

           source.ondragstart = function(event){var e = event || window.eventconsole.log('开始拖拽');}source.ondrag = function(){console.log('拖拽中');}source.ondragend = function(){console.log('拖拽结束')}

目标元素

当拖拽的元素拖到一个目标元素上时，目标元素会触发以下事件

dragenter
dragover
dragleave
drop

拖拽元素到目标上，就会触发dragenter事件（类比mouseover）
当拖动元素在目标元素中，就会持续触发dragover事件
离开目标元素，触发dragleave事件（类比mouseout）
若拖放元素到了目标元素中（在目标元素中松开鼠标），就会触发drop事件而不会触发dragleave事件

            target.ondragenter = function(){console.log('进入目标元素')}target.ondragover = function(event){var event = event || window.event;console.log('在目标元素中拖拽');event.preventDefault()}target.ondragleave = function(){console.log('拖放离开目标元素')}target.ondrop = function(event){console.log('拖放');var e = event || window.event;}

注意：元素默认是不能够拖放只要我们在目标元素的dragover事件中取消默认事件就可以解决问题

数据交换

数据交换的对象就是事件对象的属性dataTransfer
dataTransfer的两个核心方法是setData()和getData()
setData()用于设置数据，getData()用语接收数据

举个拖放的例子：

    <div class="box1" draggable="true" id="source"></div><br><div class="box2" id="target"></div>

  .box1{width: 100px;height: 100px;background: salmon}.box2{width: 300px;height: 300px;border: 1px solid black}

        window.onload = function(){var source = document.getElementById('source');var target = document.getElementById('target');source.ondragstart = function(event){var e = event || window.eventconsole.log('开始拖拽');e.dataTransfer.setData('text',e.target.id);}target.ondragenter = function(){console.log('进入目标元素')}target.ondragover = function(event){var event = event || window.event;console.log('在目标元素中拖拽');event.preventDefault()}target.ondragleave = function(){console.log('拖放离开目标元素')}target.ondrop = function(event){console.log('拖放');var e = event || window.eventvar data = e.dataTransfer.getData('text');e.target.appendChild(document.getElementById(data));}}

拖拽设置

在dataTransfer中还有两个重要的属性
dropEffect和effectAllowed

dropEffect

dropEffect属性值为字符串，表示被拖动元素可以执行哪一种放置行为
要使用这个属性，必须在dragenter事件处理函数中设置

none 不能把元素拖放至此（除文本框外全部元素的默认值）
move 移动到目标
copy 复制到目标
link 目标打开拖动元素（拖动元素必须是链接并有URL）

effectAllowed

effectAllowed属性值也是字符串，表示允许拖动元素哪种dropEffect
要使用这个属性，必须在dragst事件处理函数中设置

uninitialized 没有设置任何拖放行为
none 不能由任何行为
copy 仅允许dropEffect值为copy
link 仅允许dropEffect值为link
move 仅允许dropEffect值为move
copyLink 允许dropEffect值为copy和link
copyMove 允许dropEffect值为copy和move
linkMove 允许dropEffect值为link和move
all 允许任意dropEffect

参考文章：

https://blog.csdn.net/gongzhuxiaoxin/article/details/52894784

js原生拖拽的两种方法相关推荐

iOS: JS和Native交互的两种方法，iosjsnative交互
iOS: JS和Native交互的两种方法,iosjsnative交互背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...
JS区分中英文字符的两种方法
JS区分中英文字符的两种方法: 正则和charCodeAt()方法. 正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. ...
js循环添加事件的两种方法
js循环添加事件的两种方法选择下拉列表中的一个li将文本传到框中问题:写此二级菜单时用到的方法不好,对此进行优化原始js代码: <script>// 思路:1.点击下拉框a时,ul中 ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
JS动态创建元素（两种方法）
前言创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
js对象转换为数组的两种方法
第一种方法: Object.values(obj) 示例: var obj = { name: '小明', age: 22 }; console.log( Object.values(obj) ); ...
js实现拖拽合成两张图片和文字，并包括即时生成的二维码
参考链接合成图片 https://blog.csdn.net/qq_43789643/article/details/107461585 主要参考 https://blog.csdn.net/wei ...
Js提交表单的两种方法
提交表单一般有两种一种是submit按钮,一种是调用form的submit方法.虽然都是提交表单,但这两种还是有些差别的. 一般来说,提交form表单的时候需要做一些简单的验证,验证完后才能提交,避免 ...
Js中访问对象的两种方法
我们通常都使用点" . '"表示法来访问对象,在js中也可以用方括号" [ ] "来访问对象的属性. 使用[]时,应该将想要访问的属性用字符串的形式放在&quo ...
js 字符串反转反转的两种方法
var str = "You don't touch mother fucker think twice."; 第一种方法运用api var strReverse = str.sp ...

js原生拖拽的两种方法