vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能
更新時間：2020年08月21日 15:02:15 作者：大灰狼的小綿羊哥哥
這篇文章主要為大家詳細介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vuejs2.0實現(xià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>
實現(xiàn)效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)
最近工作上需要在el-dialog基礎上進行些功能的改動,下面這篇文章主要給大家介紹了關于vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue作用域插槽slot-scope實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
前端記錄輸入框的歷史輸入記錄實現(xiàn)步驟(輸入框數(shù)據(jù)記憶功能)
這篇文章主要介紹了如何使用localStorage來記錄每個輸入框的歷史輸入記錄,并在用戶輸入時動態(tài)更新這些記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
npm run serve運行vue項目時報錯：Error: error:0308010C
這篇文章主要介紹了npm run serve運行vue項目時,出現(xiàn)報錯：Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細的解決方法,需要的朋友可以參考下2024-04-04
Vue Element前端應用開發(fā)之用戶管理模塊的處理
本篇隨筆以權限管理模塊中的用戶管理為媒介，進行相關功能的介紹和界面設計的處理。2021-05-05
vue3中通過ref獲取元素節(jié)點的實現(xiàn)
這篇文章主要介紹了vue3中通過ref獲取元素節(jié)點的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了Vue3中watch無法監(jiān)聽的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05![解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx](http://img.jbzj.com/images/xgimg/bcimg8.png)
解決Vue3.0刷新頁面警告[Vue Router warn]:No match
這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對vue感興趣的同學，可以參考下2021-04-04