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


Posted in Javascript onFebruary 24, 2017

整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记。

<!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 22 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
微信小程序异步处理详解
Nov 10 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 #Javascript
JavaScript基本类型值-Number类型
Feb 24 #Javascript
AngularJS Toaster使用详解
Feb 24 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php文件系统处理方法小结
2016/05/23 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python实现图片彩色转化为素描
2019/01/15 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
新学期红领巾广播稿
2014/01/14 职场文书
新闻发布会策划方案
2014/06/12 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers