快捷導(dǎo)航

vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能

更新時(shí)間：2020年08月21日 15:02:15 作者：大灰狼的小綿羊哥哥

這篇文章主要為大家詳細(xì)介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vuejs2.0實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能的具體代碼，供大家參考，具體內(nèi)容如下

<!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>

實(shí)現(xiàn)效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)
最近工作上需要在el-dialog基礎(chǔ)上進(jìn)行些功能的改動(dòng),下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vue作用域插槽slot-scope實(shí)例代碼
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue數(shù)據(jù)更新但頁(yè)面沒(méi)有更新的多種情況問(wèn)題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁(yè)面沒(méi)有更新的多種情況問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
前端記錄輸入框的歷史輸入記錄實(shí)現(xiàn)步驟(輸入框數(shù)據(jù)記憶功能)
這篇文章主要介紹了如何使用localStorage來(lái)記錄每個(gè)輸入框的歷史輸入記錄,并在用戶(hù)輸入時(shí)動(dòng)態(tài)更新這些記錄,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-03-03
npm run serve運(yùn)行vue項(xiàng)目時(shí)報(bào)錯(cuò)：Error: error:0308010C
這篇文章主要介紹了npm run serve運(yùn)行vue項(xiàng)目時(shí),出現(xiàn)報(bào)錯(cuò)：Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細(xì)的解決方法,需要的朋友可以參考下
2024-04-04
Vue Element前端應(yīng)用開(kāi)發(fā)之用戶(hù)管理模塊的處理
本篇隨筆以權(quán)限管理模塊中的用戶(hù)管理為媒介，進(jìn)行相關(guān)功能的介紹和界面設(shè)計(jì)的處理。
2021-05-05
vue3中通過(guò)ref獲取元素節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue3中通過(guò)ref獲取元素節(jié)點(diǎn)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法
本文主要介紹了Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
解決Vue3.0刷新頁(yè)面警告[Vue Router warn]:No match
這篇文章主要介紹了解決Vue3.0刷新頁(yè)面警告[Vue Router warn]:No match found for location with path /xxx問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對(duì)vue感興趣的同學(xué)，可以參考下
2021-04-04