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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
JavaScript 基本概念
Jan 20 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js定时器实例分享
2016/12/20 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
公司财务工作总结的自我评价
2013/11/23 职场文书
创先争优承诺书范文
2014/03/31 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
python 提取html文本的方法
2021/05/20 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python