[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:18px;">http://www.cnblogs.com/moqiutao/p/6428632.html  
  2. </span>  
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:18px;"><!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.   
  86.                peopledata:[{  
  87.                 id:1,  
  88.                 name:'小颖'  
  89.               },{  
  90.                 id:2,  
  91.                 name:'hover'  
  92.               },{  
  93.                 id:3,  
  94.                 name:'空巢青年三 '  
  95.               },{  
  96.                 id:3,  
  97.                 name:'一丢丢'  
  98.               }]  
  99.   
  100.         },  
  101.         mounted:function(){  
  102.             this.$nextTick(function(){  
  103.                   
  104.             })  
  105.         },  
  106.           watch:{  
  107.             projectdatas:{  
  108.                 handler:function(val,oldval){  
  109.   
  110.                 },  
  111.                 deep:true  
  112.             },  
  113.             peopledata:{  
  114.                 handler:function(val,oldval){  
  115.   
  116.                 },  
  117.                 deep:true  
  118.             }  
  119.         },  
  120.   
  121.         methods: {  
  122.             drag:function(event){  
  123.                dom = event.currentTarget  
  124.             },  
  125.             drop:function(event){  
  126.               event.preventDefault();  
  127.               event.target.appendChild(dom);  
  128.             },  
  129.             allowDrop:function(event){  
  130.               event.preventDefault();  
  131.             }  
  132.           }  
  133.   
  134.     });  
  135.   
  136.   
  137. </script>  
  138. </body>  
  139. </html></span>  

实现效果：


Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue