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实现简单的拖拽元素功能的更多相关文章
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- 原生js实现模块来回拖拽效果
代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单富文本编辑器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
随机推荐
- 一个简单的实例演示vuex模块化和命名空间
因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...
- MQTT入门篇
物联网(Internet of Things,IoT)最近曝光率越来越高.虽然HTTP是网页的事实标准,不过机器之间(Machine-to-Machine,M2M)的大规模沟通需要不同的模式:之前的请 ...
- MySQL 非空约束位置不同对自增列造成的影响
MySQL版本 select version(); +------------+ | version() | +------------+ | 5.7.21-log | +------------+ ...
- rgba()和opacity之间的区别(面试题)
rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...
- Python制作二维码和条形码扫描器 (pyzbar)
条码在生活中随处可见,其可分为三类:一维条码.二维条码.三维条码 一维条码: 我们平时习惯称为条形码.条形码是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常见的条 ...
- 深度学习Dubbo系列(入门开篇)
此文档为系列学习文档 这系列文档详细讲解了dubbo的使用,基本涵盖dubbo的所有功能特性.在接下来的文章里会详细介绍. 如果你正依赖dubbo作为你业务工程的RPC通信框架,这里可以作为你的参考手 ...
- 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList的问题
一.背景 最近闲来无事,想自己搭建一套Spring+SpringMVC+Mybatis+Mysql的环境(搭建步骤会在以后博客中给出),结果运行程序时,适用@ResponseBody注解进行返回Lis ...
- hashMap的hashCode() 和equal()的使用
hashMap的hashCode() 和equa()的使用 在java的集合中,判断两个对象是否相等的规则是: ,判断两个对象的hashCode是否相等 如果不相等,认为两个对象也不相等,完毕 如果相 ...
- 在SpringBoot中添加Redis
前言 在实际的开发中,会有这样的场景.有一个微服务需要提供一个查询的服务,但是需要查询的数据库表的数据量十分庞大,查询所需要的时间很长. 此时就可以考虑在项目中加入缓存. 引入依赖 在maven项目中 ...
- Leetcode 1-10
这篇文章介绍Leetcode1到10题的解决思路和相关代码. 1. Two sum 问题描述:给定一个整数数组,返回两个数字的索引,使它们加起来等于一个特定的目标. 例子: Given nums = ...