微信问卷小程序_vuejs2.0运用原生js完成简略的拖拽

2021-01-12 13:43 jianzhan
vuejs2.0运用原生js实现简单的拖拽元素功能示例       本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

整理文档,搜刮出一个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 id="dragCon" 
 div 
 div draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas" {{pjdt.name}} /div 
 /div 
 div 
 div v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)' 
 div 
 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:'榴莲'

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。