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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
浅谈Vue.js
Mar 02 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
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
建立动态的WML站点(三)
2006/10/09 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue中使用props传值的方法
2019/05/08 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
J2EE系统只能是基于web
2015/09/08 面试题
社团活动总结
2014/04/28 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
租赁协议书
2015/01/27 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
python缺失值填充方法示例代码
2022/12/24 Python