技术点：js插件Jquery-UI：拖拽组件draggable，放置组件droppable，排序组件sortable。所以得引入相关的文件，我这就不写了。
拖拽组件draggable知识点可以参考：https://www.cnblogs.com/goforf/p/4244149.html
放置组件droppable知识点可以参考：https://blog.csdn.net/weixin_33795806/article/details/91765375
放置组件sortable知识点可以参考：https://www.cnblogs.com/neil120/p/6094618.html
思路：通过draggable左边拖拽到右边区域，触发放置组件droppable，然后在右边区域排序sortable。
其中不管是拖拽到右边区域还是在右边区域排序都会触发放置组件droppable，所以要在拖拽的时候给个随机的id或者其它属性(能唯一就行)，
要来识别是拖拽还是排序触发droppable的。
效果图：
上图代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽demo</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery-ui.min.js"></script> </head> <style type="text/css"> .move_box{ display: inline-block; width: 500px; height: 400px; margin-left: 100px; border: 1px solid #ccc; vertical-align: top; } .item{ width: 300px; height: 30px; margin: 30px auto 0; border: 1px solid #ccc; cursor: all-scroll; } .moveTo_box{ display: inline-block; width: 500px; height: 400px; margin-left: 100px; border: 1px solid #ccc; } </style> <body> <div class="move_main"> <div class="move_box"> <div class="item item1" tagid="1" id="1">1</div> <div class="item item2" tagid="2" id="2">2</div> <div class="item item3" tagid="3" id="3">3</div> </div> <div class="moveTo_box"> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $(".move_box .item").draggable({ helper: "clone",//拖拽克隆 drag: function(event, ui){ var id = getRandomCode(32);//随机数 ui.helper.context.attributes.id.value = id; } }); $( ".moveTo_box" ).droppable({ drop: function( event, ui ) { var dragContent = ui.draggable.context.outerHTML; var dragId = ''; if(ui.draggable.context.attributes.id){ dragId = ui.draggable.context.attributes.id.value; } var children = $(this).children(); var flag = 0; for(var i=0; i<children.length; i++){ var curId = children.eq(i).attr('id'); if(dragId == curId){ flag += 1; } } if(flag == 0){//flag等于0说明是拖拽的 $(this).append(dragContent); } } }) $( ".moveTo_box" ).sortable({ revert: true, deactivate:function(event,ui){ } }); $( ".moveTo_box .item" ).disableSelection(); }); function getRandomCode(length) { if (length > 0) { var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; var nums = ""; for (var i = 0; i < length; i++) { var r = parseInt(Math.random() * 61); nums += data[r]; } return nums; } else { return false; } } </script> </html>