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結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例
下面小編就為大家分享一篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue El-descriptions 描述列表功能實(shí)現(xiàn)
這篇文章主要介紹了Vue El-descriptions 描述列表功能實(shí)現(xiàn),Descriptions 描述列表,列表形式展示多個(gè)字段,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式修改 API 接口前綴
這篇文章主要介紹了vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式修改 API 接口前綴的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06
對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3?hook自動(dòng)導(dǎo)入原理解析
這篇文章主要介紹了vue3?hook自動(dòng)導(dǎo)入的原理,介紹了API的自動(dòng)導(dǎo)入及組件的自動(dòng)導(dǎo)入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-09-09
Vue事件符.capture的含義及用法說(shuō)明
這篇文章主要介紹了Vue事件符.capture的含義及用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue-devtools?開(kāi)發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開(kāi)發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個(gè)版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧
2022-01-01
Vue項(xiàng)目中安裝使用axios全過(guò)程
這篇文章主要介紹了Vue項(xiàng)目中安裝使用axios全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10