vuejs2.0运用原生js实现简单拖拽元素功能

更新时间：2020年08月21日 15:02:15 作者：大灰狼的小绵羊哥哥

这篇文章主要为大家详细介绍了vuejs2.0运用原生js实现简单拖拽元素功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
 
<style>
.select-item {
 background-color: #5bc0de;
 display: inline-block;
 text-align: center;
 border-radius: 3px;
 margin-right: 10px;
 cursor:pointer;
 padding: 6px 20px;
 color: #fff;
}
 .cursored{
 cursor: default;
}
.project-content,.people-content {
 margin: 30px 50px;
}
.people-content {
 margin-top: 30px;
}
.drag-div {
 border: 1px solid #5bc0de;
 padding:10px;
 margin-bottom: 10px;
 width: 800px;
 cursor: pointer;
}
.select-project-item {
 display: inline-block;
 text-align: center;
 border-radius: 3px;
}
.drag-people-label{
 margin-bottom:0;
 padding-right:10px;
}
[v-cloak]{
 display:none;
}
</style>
</head>
<body>
 
<div class='drag-content' id="dragCon" >
 <div class='project-content'>
 <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div>
 </div>
 <div class='people-content'>
 <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>
  <div class='select-project-item'>
  <label class='drag-people-label'>{{ppdt.name}}:</label>
  </div>
 </div>
 </div>
</div>
<script type="text/javascript" src="js/vue.min2.js"></script>
<script type="text/javascript">
 var dom;
 var ss = new Vue({
  'el':'#dragCon',
  data:{
   projectdatas:[{
    id:1,
    name:'葡萄'
    },{
    id:2,
    name:'芒果'
    },{
    id:3,
    name:'木瓜'
    },{
    id:4,
    name:'榴莲'
    }],
 
 
    peopledata:[{
    id:1,
    name:'小颖'
    },{
    id:2,
    name:'hover'
    },{
    id:3,
    name:'空巢青年三 '
    },{
    id:3,
    name:'一丢丢'
    }]
 
  },
  mounted:function(){
   this.$nextTick(function(){
    
   })
  },
   watch:{
   projectdatas:{
    handler:function(val,oldval){
 
    },
    deep:true
   },
   peopledata:{
    handler:function(val,oldval){
 
    },
    deep:true
   }
  },
 
  methods: {
   drag:function(event){
    dom = event.currentTarget
   },
   drop:function(event){
    event.preventDefault();
    event.target.appendChild(dom);
   },
   allowDrop:function(event){
    event.preventDefault();
   }
   }
 
 });
 
 
</script>
</body>
</html>

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3使用postcss-px-to-viewport实现页面自适应
postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 px 单位转换为视口单位,下面我们就看看如何使用postcss-px-to-viewport实现页面自适应吧
2024-01-01
Vue项目中配置pug解析支持
这篇文章主要介绍了Vue项目中配置pug解析支持的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
学习笔记之Vuex的用法总结(Vue状态管理)
这篇文章主要介绍了学习笔记之Vuex的用法总结(Vue状态管理)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Element Collapse 折叠面板的使用方法
这篇文章主要介绍了Element Collapse 折叠面板的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue Element前端应用开发之获取后端数据
这篇文章主要介绍了Vue Element前端应用开发之获取后端数据，对vue感兴趣的同学，可以参考下
2021-05-05
Vue的export default和带返回值的data()及@符号的用法说明
这篇文章主要介绍了Vue的export default和带返回值的data()及@符号的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue+springboot实现项目的CORS跨域请求
这篇文章主要介绍了vue+springboot实现项目的CORS跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
基于vue的短信验证码倒计时demo
这篇文章主要介绍了基于vue的短信验证码倒计时demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue2使用el-date-picker实现动态日期范围demo
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue中状态管理器Pinia的用法详解
Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎,它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库,下面就跟随小编一起来学习一下它的具体使用吧
2023-10-10