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 = ...