HTML5 drag & drop --- 初期尝试

HTML5 drag & drop --- 初期尝试_第1张图片

HTML5:drag & drop API

绑定在拖拽目标
Evnet Description
dragstart 当用户开始拖拽一个元素或者一个文本选取区块的时触发
drag 当用户正在拖拽一个元素或者一个文本选取区块的时触发
dragend 当用户结束拖拽一个元素或者一个文本选取区块的时触发
绑定在放置目标
Evnet Description
dragenter 当一个元素或文字选取区块被拖曳移动进入一个有效的放置目标时触发
dragover 当一个元素或文字选取区块被拖曳移动经过一个有效的放置目标时触发
dragleave 当一个元素或文字选取区块被拖曳移动离开一个有效的放置目标时触发
dragexist 当一个元素不再是被选取中的拖曳元素时触发
drop 当一个元素或文字选取区块被放置至一个有效的放置目标时触发

实操

HTML5 drag & drop --- 初期尝试_第2张图片
效果图

编写代码




    
    
    HTML5 drag and drop
    


    
    • A
    • B
    • C

    总结

    drag & drop 带来的应用场景,远不止这些,还有待探索。

    你可能感兴趣的:(HTML5 drag & drop --- 初期尝试)