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


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了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>

实现效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
You might like
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php读取excel文件的简单实例
2013/08/26 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python学生管理系统
2019/01/30 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
大学毕业感言50字
2014/02/07 职场文书
保安辞职信范文
2015/02/28 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Pandas-DataFrame知识点汇总
2022/03/16 Python