1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="" />
  9.  
  10. <style>
  11. .select-item {
  12. background-color: #5bc0de;
  13. display: inline-block;
  14. text-align: center;
  15. border-radius: 3px;
  16. margin-right: 10px;
  17. cursor:pointer;
  18. padding: 6px 20px;
  19. color: #fff;
  20. }
  21. .cursored{
  22. cursor: default;
  23. }
  24. .project-content,.people-content {
  25. margin: 30px 50px;
  26. }
  27. .people-content {
  28. margin-top: 30px;
  29. }
  30. .drag-div {
  31. border: 1px solid #5bc0de;
  32. padding:10px;
  33. margin-bottom: 10px;
  34. width: 800px;
  35. cursor: pointer;
  36. }
  37. .select-project-item {
  38. display: inline-block;
  39. text-align: center;
  40. border-radius: 3px;
  41. }
  42. .drag-people-label{
  43. margin-bottom:0;
  44. padding-right:10px;
  45. }
  46. [v-cloak]{
  47. display:none;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52.  
  53. <div class='drag-content' id="dragCon" >
  54. <div class='project-content'>
  55. <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div>
  56. </div>
  57. <div class='people-content'>
  58. <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>
  59. <div class='select-project-item'>
  60. <label class='drag-people-label'>{{ppdt.name}}:</label>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <script type="text/javascript" src="js/vue.min2.js"></script>
  66. <script type="text/javascript">
  67. var dom;
  68. var ss = new Vue({
  69. 'el':'#dragCon',
  70. data:{
  71. projectdatas:[{
  72. id:1,
  73. name:'葡萄'
  74. },{
  75. id:2,
  76. name:'芒果'
  77. },{
  78. id:3,
  79. name:'木瓜'
  80. },{
  81. id:4,
  82. name:'榴莲'
  83. }],
  84.  
  85. peopledata:[{
  86. id:1,
  87. name:'小颖'
  88. },{
  89. id:2,
  90. name:'hover'
  91. },{
  92. id:3,
  93. name:'空巢青年三 '
  94. },{
  95. id:3,
  96. name:'一丢丢'
  97. }]
  98.  
  99. },
  100. mounted:function(){
  101. this.$nextTick(function(){
  102.  
  103. })
  104. },
  105. watch:{
  106. projectdatas:{
  107. handler:function(val,oldval){
  108.  
  109. },
  110. deep:true
  111. },
  112. peopledata:{
  113. handler:function(val,oldval){
  114.  
  115. },
  116. deep:true
  117. }
  118. },
  119.  
  120. methods: {
  121. drag:function(event){
  122. dom = event.currentTarget
  123. },
  124. drop:function(event){
  125. event.preventDefault();
  126. event.target.appendChild(dom);
  127. },
  128. allowDrop:function(event){
  129. event.preventDefault();
  130. }
  131. }
  132.  
  133. });
  134.  
  135. </script>
  136. </body>
  137. </html>

实现效果:

vuejs2.0运用原生js实现简单的拖拽元素功能的更多相关文章

  1. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  2. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  3. 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  4. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  5. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  8. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  9. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

随机推荐

  1. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  2. MQTT入门篇

    物联网(Internet of Things,IoT)最近曝光率越来越高.虽然HTTP是网页的事实标准,不过机器之间(Machine-to-Machine,M2M)的大规模沟通需要不同的模式:之前的请 ...

  3. MySQL 非空约束位置不同对自增列造成的影响

    MySQL版本 select version(); +------------+ | version() | +------------+ | 5.7.21-log | +------------+ ...

  4. rgba()和opacity之间的区别(面试题)

    rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...

  5. Python制作二维码和条形码扫描器 (pyzbar)

    条码在生活中随处可见,其可分为三类:一维条码.二维条码.三维条码 一维条码: 我们平时习惯称为条形码.条形码是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常见的条 ...

  6. 深度学习Dubbo系列(入门开篇)

    此文档为系列学习文档 这系列文档详细讲解了dubbo的使用,基本涵盖dubbo的所有功能特性.在接下来的文章里会详细介绍. 如果你正依赖dubbo作为你业务工程的RPC通信框架,这里可以作为你的参考手 ...

  7. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList的问题

    一.背景 最近闲来无事,想自己搭建一套Spring+SpringMVC+Mybatis+Mysql的环境(搭建步骤会在以后博客中给出),结果运行程序时,适用@ResponseBody注解进行返回Lis ...

  8. hashMap的hashCode() 和equal()的使用

    hashMap的hashCode() 和equa()的使用 在java的集合中,判断两个对象是否相等的规则是: ,判断两个对象的hashCode是否相等 如果不相等,认为两个对象也不相等,完毕 如果相 ...

  9. 在SpringBoot中添加Redis

    前言 在实际的开发中,会有这样的场景.有一个微服务需要提供一个查询的服务,但是需要查询的数据库表的数据量十分庞大,查询所需要的时间很长. 此时就可以考虑在项目中加入缓存. 引入依赖 在maven项目中 ...

  10. Leetcode 1-10

    这篇文章介绍Leetcode1到10题的解决思路和相关代码. 1. Two sum 问题描述:给定一个整数数组,返回两个数字的索引,使它们加起来等于一个特定的目标. 例子: Given nums = ...