<!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实现简单的拖拽元素功能的更多相关文章

  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. HTTP 协议服务器相关概念

    1.HTTP/1.1规范允许一台HTTP服务器搭建多个Web站点,即物理层面只有一台服务器,使用虚拟主机功能,可就假想有多台服务器. 在相同IP地址下,由于虚拟主机可以寄存多个不同主机名和域名的网站, ...

  2. 六、activiti工作流-流程定义查询

    本节主要讲流程定义查询.查询某个流程设计图片并保存到本地中.查询最新版本的流程定义集合.删除所有key相同的定义 先创建一个java类 package com.java.procdef; import ...

  3. Spring MVC之中前端向后端传数据

    Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...

  4. 深入分析Java I/O的工作机制 （三）网络I/O的工作机制 很详细

    3.网络I/O的工作机制 前言:数据从一台主机(服务端)发送到网络中的另一台主机(客户端)需要经过很多步骤:首先需要有相互沟通的意向.其次要有能够沟通的物理渠道(物理链路):是通过电话,还是直接面对面 ...

  5. 带你一文了解Python中的运算符

    运算符 目标 算数运算符 比较(关系)运算符 逻辑运算符 赋值运算符 运算符的优先级 数学符号表链接:https://zh.wikipedia.org/wiki/数学符号表 01. 算数运算符 是完成 ...

  6. JavaScript是如何工作的：深入类和继承内部原理 + Babel和TypeScript之间转换

    现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...

  7. Nginx内置模块简介

    经常编译Nginx的时候看到./configure后面跟着很多--with命令,虽然知道是添加模块,但一直也没有仔细去研究这些模块究竟是什么作用.本文会对常用的内置模块做个简单介绍,方便后续检索查看. ...

  8. 一文带你看懂cookie，面试前端不用愁

    本文由云+社区发表 在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊? localStorage是H5中的一种浏览器本地存储方式,而实际上,cookie本身并 ...

  9. Thrift架构介绍

    Thrift是一个跨语言的服务部署框架,最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过一个中间语言(IDL, 接口定义语言)来定义RPC的接口和数据类型, ...

  10. sshfs基于ssh挂载远程目录

    为了像本地一样访问远程主机上的目录,通常我们会在远程主机上使用nfs来导出目录,并在本地主机上mount这个nfs文件系统.如果是windows系统,则使用cifs或samba的方式来访问. 但可能我 ...