Loading

vue拖拽

// 拖动的对象,需要设置draggable属性为true(draggable="true"),

// a元素需要href,img元素需要src。

// 1、被拖对象:dragstart事件,被拖动的元素,开始拖放触发

// 2、被拖对象:drag事件,被拖放的元素,拖放过程中

// 3、经过对象:dragenter事件,拖放过程中鼠标经过的元素,被拖放的元素“开始”进入其它元素范围内(刚进入)

// 4、经过对象:dragover事件,拖放过程中鼠标经过的元素,被拖放的元素正在本元素范围内移动(一直)

// 5、经过对象:dragleave事件,拖放过程中鼠标经过的元素,被拖放的元素离开本元素范围

// 6、目标地点:drop事件,拖放的目标元素,其他元素被拖放到本元素中

// 7、被拖对象:dragend事件,拖放的对象元素,拖放操作结束

元素拖拽

需要拖拽的元素添加draggable为true,false为不能拖拽

draggable="true"

拖拽元素事件

拖拽元素的时候,被拖拽元素会触发以下事件

  • dragstart
  • drag
  • dragend

目标元素事件

当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件

  • dragenter
  • dragover
  • dragleave
  • drop

拖拽设置

在dataTransfer中还有两个重要的属性
dropEffecteffectAllowed

dropEffect

dropEffect属性值为字符串,表示被拖动元素可以执行哪一种放置行为
要使用这个属性,必须在dragenter事件处理函数中设置

  • none 不能把元素拖放至此(除文本框外全部元素的默认值)
  • move 移动到目标
  • copy 复制到目标
  • link 目标打开拖动元素(拖动元素必须是链接并有URL)

effectAllowed

effectAllowed属性值也是字符串,表示允许拖动元素哪种dropEffect
要使用这个属性,必须在dragst事件处理函数中设置

  • uninitialized 没有设置任何拖放行为
  • none 不能由任何行为
  • copy 仅允许dropEffect值为copy
  • link 仅允许dropEffect值为link
  • move 仅允许dropEffect值为move
  • copyLink 允许dropEffect值为copy和link
  • copyMove 允许dropEffect值为copy和move
  • linkMove 允许dropEffect值为link和move
  • all 允许任意dropEffect
posted @ 2022-03-22 14:40  LRolinx  阅读(1718)  评论(0编辑  收藏  举报