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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript中的location用法简单介绍
Mar 07 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
JS实现小米轮播图
Sep 21 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
PHP Google的translate API代码
2008/12/10 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php批量删除操作代码分享
2017/02/26 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
中科创达面试题
2016/12/28 面试题
报到证丢失证明
2014/01/11 职场文书
学校节能减排方案
2014/06/13 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python