我正在做一个小项目，该项目包括如下功能：
我搜索了很多文章，但没有找到满足我要求的。所有的主题都可以拖放功能，但没有一个主题可以像上面的例子一样群。
您可以自由选择Java脚本或jQuery，也可以对此作出React。
ttp71kqs1#
我现在试过了，你可以通过css文件中的ID给它添加更多的样式。
<!DOCTYPE html> <html> <body> <div class="example-parent"> <h1>Re-arrangeable List</h1> <i><p>Change the order as you like by dragging</p></i> <div class="example-origin"> <h3> <strong>LIST :-</strong></h3> <div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);"> Item 1</div> <div id="draggable-2" class="example-draggable" draggable="true"> 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);"> ------Re-arranged List------</div> </div> <script> function onDragStart(event) { event .dataTransfer .setData('text/plain', event.target.id); event .currentTarget .style .backgroundColor = '#7f5db8'; } function onDragOver(event) { event.preventDefault(); } function onDrop(event) { const id = event .dataTransfer .getData('text'); const draggableElement = document.getElementById(id); const dropzone = event.target; dropzone.appendChild(draggableElement); event .dataTransfer .clearData(); } </script> </body> </html>
希望这能解决你的问题！编码快乐。
1条答案
按热度按时间ttp71kqs1#
我现在试过了，你可以通过css文件中的ID给它添加更多的样式。
希望这能解决你的问题！
编码快乐。