如何拖拽图片到指定位置，具体方法如下，在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上js代码。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dropBox{
width: 300px;
height: 300px;
border:1px solid red;
font-size: 40px;
text-align: center;
background: lightyellow;
background-repeat: no-repeat;
background-size: 100%;
}
#dropBox div{
margin:50px auto;
width: 140px;
}
</style>
</head>
<body>
<div id="dropBox">
<div>拖动你的图片到这里</div>
</div>
<script type="text/javascript">
var dropBox;
window.onload=function(){
dropBox = document.getElementById("dropBox");
// 鼠标进入放置区时
dropBox.ondragenter = ignoreDrag;
// 拖动文件的鼠标指针位置放置区之上时发生
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e){
// 确保其他元素不会取得该事件
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();
// 取得拖放进来的文件
var data = e.dataTransfer;
var files = data.files;
// 将其传给真正的处理文件的函数
var file = files[0];
var reader = new FileReader();
reader.onload=function(e){
dropBox.style.backgroundImage = "url('"+e.target.result+"')";
}
reader.readAsDataURL(file);
}
</script>
</body>
</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:鼠标抬开事件
ngDraggable.js_AngularJS之拖拽排序
ngDraggable.js是一款比较简单实用的angularJS拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素
拖放实现--兼容手机与pc端
拖放是一种非常流行的用户界面模式。它的概念很简单：点击某个对象，并按住鼠标按钮不放，将鼠标移到到另一个区域，然后释放按钮将对象放到这里。
实现平滑过渡的拖拽排序
最近重读Vue官方文档，在列表的排序过渡这一小节，文档提到，<transition-group> 组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下
Element ui表格组件+sortablejs实现行拖拽排序
运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便；实现方式：template部分、script部分
实现元素拖拽的两种方式
为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!