标签：droppable js draggable var ui 组件 拖拽
技术点：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>
标签：droppable,js,draggable,var,ui,组件,拖拽 来源： https://www.cnblogs.com/zzwlong/p/12096637.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。