Vanila drag and drop feature in JavaScript style example parent border 2px solid DFA612 color black display flex font family sans serif font weight bold example origin flex basis 100 flex grow 1 padding 10px example draggable background color 4AAE9B font weight normal margin bottom 10px margin top 10px padding 10px example dropzone background color 6DB65B flex basis 100 flex grow 1 padding 10px style script function onDragStart event console log drag start event event dataTransfer setData text plain event target id event currentTarget style backgroundColor yellow function onDragOver event console log drag over event event preventDefault function onDrop event console log drop event const id event dataTransfer getData text const draggableElement document getElementById id const dropzone event target dropzone appendChild draggableElement event dataTransfer clearData script div class example parent div class example origin div id draggable 1 class example draggable draggable true ondragstart onDragStart event draggable div div div class example dropzone ondragover onDragOver event ondrop onDrop event dropzone div div Vanila drag and drop feature in JavaScript style body min height 400px example parent border 2px solid DFA612 color black display flex font family sans serif font weight bold example origin flex basis 100 flex grow 1 padding 10px example draggable background color 4AAE9B font weight normal margin bottom 10px margin top 10px padding 10px example dropzone background color 6DB65B flex basis 100 flex grow 1 padding 10px style script function onDragStart event console log drag start event event dataTransfer setData text plain event target id event currentTarget style backgroundColor yellow function onDragOver event console log drag over event event preventDefault function onDrop event console log drop event const id event dataTransfer getData text console log drop id id const draggableElement document getElementById id const dropzone event target console log event target event target dropzone appendChild draggableElement event dataTransfer clearData script div class example parent div class example origin div id draggable 1 class example draggable draggable true ondragstart onDragStart event item 1 div div id draggable 2 class example draggable draggable true ondragstart onDragStart event item 2 div div id draggable 3 class example draggable draggable true ondragstart onDragStart event item 3 div div id draggable 4 class example draggable draggable true ondragstart onDragStart event item 4 div div div class example dropzone ondragover onDragOver event ondrop onDrop event dropzone div div
bold example origin flex basis 100 flex grow 1 padding 10px example draggable background color 4AAE9B font weight normal margin bottom 10px margin top 10px padding 10px example dropzone background color 6DB65B flex basis 100 flex grow 1 padding 10px style script function onDragStart event console log drag start event event dataTransfer setData text plain event target id event currentTarget style backgroundColor yellow function onDragOver event console log drag over event event preventDefault function onDrop event console log drop event const id event dataTransfer getData text console log drop id id const draggableElement document getElementById id const dropzone event target console log event target event target dropzone appendChild draggableElement event dataTransfer clearData script div class example parent div class example origin div id draggable 1 class example draggable draggable true ondragstart onDragStart event item 1 div div id draggable 2 class example draggable draggable true ondragstart onDragStart event item 2 div div id draggable 3 class example draggable draggable true ondragstart onDragStart event item 3 div div id draggable 4 class example draggable draggable true ondragstart onDragStart event item 4 div div div class example dropzone ondragover onDragOver event ondrop onDrop event dropzone div div