技术点：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>