使用drag与drop实现拖拽，（vue）

在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。这是张鑫旭的关于drag与drop函数的介绍，很详细：http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%

CURRY_zhao

21373人浏览 · 2017-05-26 20:26:48

CURRY_zhao · 2017-05-26 20:26:48 发布

在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。

这是张鑫旭的关于drag与drop函数的介绍，很详细：http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/

下面是代码片段：

  <div  class="fav-fold-panel"  v-if="!typeChange"  draggable="true" @dragstart="drag($event)"
 
  @dragover="allowDrop($event)">
 
  <!-- 面板内容 -->
 
  <div  class="favTitle-card" :data="favPanelAllData" v-if="foldDone">
 
  <favPanel v-for="item in favPanelAllData" v-if="item.id===1" :favTitle="item.title"
 
  renameText="更名" foldText="折叠"
 
  unfoldText="展开" :favListData="item.content" draggable="true" @dragstart="drag($event)">
 
  <ul  class="ul-content">
 
  <li  class="ul-content-li" :favCommonList1="item.content"></li>
 
  </ul>
 
  <!-- <favPopPanel :show="popShow" @onHide="popShow = false"></favPopPanel> -->
 
  <!-- <div :favListData="item.favListData"></div> -->
 
  </favPanel>
 
  </div>

  <div class="fav-card-create" :data="favPanelAllData">
 
  <favFooter>
 
  <el-button type="primary" @click="addFoldFuc">新建文件夹</el-button>
 
  <el-button-group>
 
  <el-button @click="foldFuc">全部折叠</el-button>
 
  <el-button @click="foldFuc">全部展开</el-button>
 
  </el-button-group>
 
  </favFooter>
 
  </div>
 
  </div>

另一段代码：

  <div  class="favTitle-card" :data="favPanelAllData" draggable="true" ondragstart="drag(event)">
 
  <favPanel v-for="item in favPanelAllData" v-if="item.id===2" :favTitle="item.title"
 
  renameText="更名" foldText="没我" unfoldText="没你" :favListData="item.content">
 
  <ul  class="ul-content">
 
  <li  class="ul-content-li" :favListData="item.content" :if="!foldDone"></li>
 
  </ul>
 
  </favPanel>
 
  </div>

function部分

  drag(event) {
 
  dom = event.currentTarget
 
  },
 
  drop(event) {
 
  event.preventDefault()
 
  event.target.appendChild(dom)
 
  },

  allowDrop(event) {
 
  event.preventDefault()
 
  }

然后，drag与drop系统的研究明天再说。

这样写的坏处是什么，还有为什么不采取这种方法实现拖拽。

Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（）正确答案：B. 智能体与环境的交互以及自身的物理形态解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。问题2:以下哪一项是具身智能的典型应用场景？（）正确答案：B.