文件名称:drag-n-drop::pushpin:原生使用JavaScript创建的拖放看板
文件大小:46KB
文件格式:ZIP
更新时间:2024-05-28 13:43:57
javascript html tutorial drag-and-drop drag
您可以在上阅读有关实现的书面教程。 :pushpin: :lady_beetle: Bug修复 :red_question_mark: 为什么第一次拖动后缩放效果不起作用? 发生这种情况是因为该列HTML已更新。 由于事件侦听器位于.card内的.column ,因此在第一次更新HTML之后,它们将与DOM分离。 这意味着它们将不再被触发,因此它们将不会获得应用缩放效果的.dragging类。 要解决此问题,您要做的就是从文档中委派事件侦听器。 dragend事件也是如此。 document . addEventListener ( 'dragstart' , e => { if ( e . target . className . includes ( 'card' ) ) { dragStart ( e . target ) ; } } ) ;
【文件预览】:
drag-n-drop-master
----index.html(2KB)
----hero.jpg(52KB)
----README.md(1KB)
----drag-n-drop.js(1KB)
----style.css(1KB)