拖放是一种非常流行的用户界面模式。它的概念很简单：点击某个对象，并按住鼠标按钮不放，将鼠标移到到另一个区域，然后释放按钮将对象放到这里。
拖放的基本概念很简单：创建一个绝对定位的元素，使其可以用鼠标移到。
<body>
<div style="">
<div class="draggable" style="width:100px;height:100px;position:absolute;background:red">移动的div</div>
<div class="draggable" style="width:100px;height:100px;position:absolute;background:green;left:120px;">移动的div</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var DragDrop = function() {
var dragging = null;
var diffX = 0;
var diffY = 0;
function handleEvent(event) {
event = event || window.event;
var target = event.target;
switch (event.type) {
case "mousedown":
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
}
break;
case "mousemove":
if (dragging !== null) {
dragging.style.left = event.clientX - diffX + "px";
dragging.style.top = event.clientY - diffY + "px"
}
break;
case "mouseup":
dragging = null;
break;
}
}
//公共接口
return {
enable: function() {
document.addEventListener("mousedown", handleEvent, false);
document.addEventListener("mousemove", handleEvent, false);
document.addEventListener("mouseup", handleEvent, false);
},
disable: function() {
document.removeEventListener("mousedown", handleEvent, false);
document.removeEventListener("mousemove", handleEvent, false);
document.removeEventListener("mouseup", handleEvent, false)
}
}
}
DragDrop().enable();
</script>
</body>拖放功能还不能真正应用起来，除非能知道什么时候拖动开始了。从这点上看，前面的代码没有提供任何方法表示拖动开始、正在拖动或者已经结束。这时，可以使用自定义事件来指示这几个事件的发生，让应用的其他部分与拖动功能进行交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>拖放</title>
<style type="text/css">
.drap-container {
padding-top: 15px;
}
#dragWrap {
height: 100px;
background: #f2f2f2;
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
float: left;
margin-right: 20px;
padding: 10px;
}
.draggable {
width: 100px;
height: 100px;
position: absolute;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}
.box1 {
background: #5972f1;
}
.box2 {
left: 120px;
background: #47bf6c;
}
#status {
height: 35px;
line-height: 35px;
background: #fdf5f0;
padding: 0 15px;
border: 1px solid #fde4d4;
margin-bottom: 10px;
}
@media(max-width:500px) {
#dragWrap {
width: 100%;
float: none;
}
}
</style>
</head>
<body class="">
<div class="container drap-container">
<div id="dragWrap">
<div class="draggable box1" id="box1">移动的div</div>
<div class="draggable box2" id="box2">移动的div</div>
</div>
<div id="status">status</div>
</div>
<script type="text/javascript">
function EventTarget() {
this.handlers = {}
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(type, handler) {
console.log(type);
//刚开始只有type并没有为this.handlers[type]赋值
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
//console.log("hi")
}
//接着执行push
this.handlers[type].push(handler);
console.log(this.handlers[type]);
},
fire: function(event) {
if (!event.target) {
event.target = this;
//console.log("not have eventTarget")
}
if (this.handlers[event.type] instanceof Array) {
//console.log("isArray")
var handlers = this.handlers[event.type];
//循环执行多个事件
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
}
}
var DragDrop = function() {
var wrap = document.getElementById("dragWrap");
var dragdrop = new EventTarget();
var dragging = null;
var diffX = 0;
var diffY = 0;
var startEvt, moveEvt, endEvt;
if ("ontouchstart" in window) {
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend"
} else {
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
function handleEvent(event) {
//获取事件和对象
event = event || window.event;
var target = event.target;
//确定事件类型
switch (event.type) {
case startEvt:
if (target.className.indexOf("draggable") > -1) {
dragging = target;
console.log(event.clientX)
if (startEvt == "touchstart") {
console.log(event)
diffX = event.touches[0].clientX - target.offsetLeft;
diffY = event.touches[0].clientY - target.offsetTop;
dragdrop.fire({ type: "dragstart", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY });
console.log(event.touches[0].clientX, event.touches[0].clientY)
} else {
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY });
}
}
break;
case moveEvt:
if (dragging !== null) {
if (moveEvt == "touchmove") {
event.preventDefault();
console.log(event)
dragging.style.left = event.touches[0].clientX - diffX + "px";
dragging.style.top = event.touches[0].clientY - diffY + "px";
console.log(event.touches[0].clientX, event.touches[0].clientY)
dragdrop.fire({ type: "drag", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY })
} else {
dragging.style.left = event.clientX - diffX + "px";
dragging.style.top = event.clientY - diffY + "px";
dragdrop.fire({ type: "drag", target: dragging, x: event.clientX, y: event.clientY })
}
}
break;
case endEvt:
if (endEvt == "touchend") {
console.log(endEvt)
console.log(event)
dragdrop.fire({ type: "dragend", target: dragging, x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY })
} else {
dragdrop.fire({ type: "dragend", target: dragging, x: event.clientX, y: event.clientY })
}
dragging = null;
break;
}
}
//公共接口
dragdrop.enable = function() {
wrap.addEventListener(startEvt, handleEvent, false);
wrap.addEventListener(moveEvt, handleEvent, false);
wrap.addEventListener(endEvt, handleEvent, false);
},
dragdrop.disable = function() {
wrap.removeEventListener(startEvt, handleEvent, false);
wrap.removeEventListener(moveEvt, handleEvent, false);
wrap.removeEventListener(endEvt, handleEvent, false)
}
return dragdrop
}();
//可以写成
//DragDrop=DragDrop()
//返回EventTarget{disable:ƒ (),enable:ƒ (),handlers:{drag:[f],dragend:[f],dragstart:[f]}}
//console.log(DragDrop)
DragDrop.enable();
DragDrop.addHandler("dragstart", function(event) {
var status = document.getElementById("status");
status.innerHTML = "Started dragging " + event.target.id
});
DragDrop.addHandler("drag", function(event) {
var status = document.getElementById("status");
status.innerHTML = "Dragged " + event.target.id + " to(" + event.x + "," + event.y + ")";
});
DragDrop.addHandler("dragend", function(event) {
var status = document.getElementById("status");
status.innerHTML = "Dragged " + event.target.id + " at(" + event.x + "," + event.y + ")";
});
</script>
</body>
</html>由于DragDrop对象是一个使用了模块模式的单例，所以需要进行一些更改来使用EventTarget类型。首先，创建一个新的EventTarget 对象，然后添加enable()和disable()方法，最后返回这个对象。
来自：http://www.qfunny.cn/pages/drag.html
原生js实现拖拽与拖放事件，JavaScript实现元素拖拽、图片到指定区域进行预览的例子
拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改。原生Js实现元素拖拽、图片到指定区域进行预览的方法实现
Vue自定义指令：通过Vue.directive实现集成第三方插件，拖拽功能，图片加载等功能
当我们需要对Dom元素进行底层操作的时候，这时候我们就需要使用vue的自定义指令。这篇文章将讲解：如何注册Vue自定义指令？Vue的钩子函数，vue钩子函数参数，vue实现拖拽功能，实现图片加载功能,Vue自定义指令集成第三方插件 ...
移动端拖拽 - 固定定位 fixed
移动端的拖拽有两种主流的实现方案：1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果；2. 使用 transform 中的平移 translate 属性实现拖拽。
vue模块拖拽实现
正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事，把这个东西实现了一下。原理很简单，写的很方便。
原生js实现拖拽功能
如果要设置物体拖拽，必须使用三个事件，分别是：1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标抬开事件
js实现本地图片文件拖拽效果
如何拖拽图片到指定位置，具体方法如下，在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上js代码
ngDraggable.js_AngularJS之拖拽排序
ngDraggable.js是一款比较简单实用的angularJS拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素
实现平滑过渡的拖拽排序
最近重读Vue官方文档，在列表的排序过渡这一小节，文档提到，<transition-group> 组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下
Element ui表格组件+sortablejs实现行拖拽排序
运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便；实现方式：template部分、script部分
实现元素拖拽的两种方式
为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!