jQuery自由拖拽排序代码

1、新建html文档。

3、书写css代码。<style> body { font-family: arial; ba艘早祓胂ckground: rgb(242, 244, 246); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h3 { color: rgb(199, 204, 209); font-size: 28px; text-align: center; } #elements-container { text-align: center; } .draggable-element { display: inline-block; width: 200px; height: 200px; background: white; border: 1px solid rgb(196, 196, 196); line-height: 200px; text-align: center; margin: 10px; color: rgb(51, 51, 51); font-size: 30px; cursor: move; } .drag-list { width: 400px; margin: 0 auto; } .drag-list > li { list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0; font-size: 24px; } .drag-list .title { display: inline-block; width: 130px; padding: 6px 6px 6px 12px; vertical-align: top; } .drag-list .drag-area { display: inline-block; background: rgb(158, 211, 179); width: 60px; height: 40px; vertical-align: top; float: right; cursor: move; } .code { background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); width: 600px; margin: 22px auto; position: relative; } .code::before { content: 'Code'; background: rgb(80, 80, 80); width: 96%; position: absolute; padding: 8px 2%; color: rgb(255, 255, 255); } .code pre { margin-top: 50px; padding: 0 13px; font-size: 1em; }

5、代码整体结构。