快捷導(dǎo)航

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

更新時(shí)間：2017年02月24日 11:51:37 作者：孟然

本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

整理文檔，搜刮出一個(gè)vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例，留作筆記。

<!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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
拖拽

相關(guān)文章

vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開(kāi)關(guān)狀態(tài)切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
Vue監(jiān)聽(tīng)頁(yè)面刷新和關(guān)閉功能
我在做項(xiàng)目的時(shí)候，有一個(gè)需求，在離開(kāi)（跳轉(zhuǎn)或者關(guān)閉）購(gòu)物車(chē)頁(yè)面或者刷新購(gòu)物車(chē)頁(yè)面的時(shí)候向服務(wù)器提交一次購(gòu)物車(chē)商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽(tīng)頁(yè)面刷新和關(guān)閉功能,需要的朋友可以參考下
2019-06-06
vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能
本文主要介紹了vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue輪播圖插件vue-awesome-swiper
這篇文章主要為大家詳細(xì)介紹了vue輪播圖插件vue-awesome-swiper，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問(wèn)題(get、post、put、delete)
這篇文章主要介紹了vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問(wèn)題(get、post、put、delete)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法的過(guò)程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫(xiě)法，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11
Vue全家桶入門(mén)基礎(chǔ)教程
Vue 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架，和React，都自稱(chēng)自己只關(guān)注視圖層，全家桶對(duì)于開(kāi)發(fā)一個(gè)完整的中大型單頁(yè)面應(yīng)用項(xiàng)目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門(mén)基礎(chǔ)教程，感興趣的朋友一起看看吧
2021-05-05
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
vue的注意規(guī)范之v-if 與 v-for 一起使用教程
這篇文章主要介紹了vue的注意規(guī)范之v-if 與 v-for 一起使用方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由
這篇文章主要介紹了vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04