需求：需要锁定某个拖拽元素，不可拖拽，不受其他拖拽元素排序带来的影响
方式1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
/*font-size: 100px;*/
}
a {
text-decoration: none;
}
ul {
padding-left: 0;
margin: 0;
list-style: none;
width: 330px;
}
.static {
color: red;
}
li {
background-color: whitesmoke;
border: 1px solid silver;
width: 100px;
padding: 2px;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<!--拖拽过程中，固定某一个拖拽对象，且拖拽其他对象时不会发生移动-->
<ul id="sortable">
<li>oranges</li>
<li class="static">apples</li>
<li>bananas</li>
<li>pineapples</li>
<li>grapes</li>
<li class="static">pears</li>
<li>mango</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
// 思想：保存固定的元素的位置，在排序期间，删除所有固定元素，在排序完成之前，重新插入元素
$('#sortable').sortable({
items: ':not(.static)', // 指定可排序的元素为非static的属性的元素
start: function () { // 当排序开始时触发该事件
$('.static', this).each(function () { // 遍历.static元素，向元素附加数据
var $this = $(this);
$this.data('pos', $this.index());
});
},
change: function () { // 在排序期间触发该事件，除了当 DOM 位置改变时。
$sortable = $(this);
$statics = $('.static', this).detach(); // detach() 方法移除被选元素，包括所有文本和子节点。即移除所有.static元素
$helper = $('<li></li>').prependTo(this); // 在<li></li>中插入内容,此处this指 #sortable
$statics.each(function () {
var $this = $(this);
var target = $this.data('pos'); // 取回附加数据，即index
// 1、$('div','li')是$(子，父)，是从父节点里找子，而不是找li外面的div。
// $('li', $sortable).eq(target) 是所有的节点
// 在$('li', $sortable).eq(target)中插入 $this
$this.insertAfter($('li', $sortable).eq(target)); // 在之后插入 拖拽元素
});
$helper.remove();
}
});
</script>
</body>
</html>
解决方式2：
使用Sortable.js，但核心代码几乎是一样的，sortable的问答区，有人提过类似问题，作者也标记了该需求，但一直没做?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
/*font-size: 100px;*/
}
a {
text-decoration: none;
}
ul {
padding-left: 0;
margin: 0;
list-style: none;
width: 330px;
}
.static {
color: red;
}
li {
background-color: whitesmoke;
border: 1px solid silver;
width: 100px;
padding: 2px;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<!--拖拽过程中，固定某一个拖拽对象，且拖拽其他对象时不会发生移动-->
<ul id="sortable">
<li>oranges</li>
<li class="static">apples</li>
<li>bananas</li>
<li>pineapples</li>
<li>grapes</li>
<li class="static">pears</li>
<li>mango</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Sortable.min.js"></script>
<script>
var sortable = new Sortable(document.getElementById('sortable'), {
filter: ".static",
onStart: function (/**Event*/evt) {
$('.static').each(function () { // 遍历.static元素，向元素附加数据
var $this = $(this);
$this.data('pos', $this.index());
});
},
onChange: function (/**Event*/evt,) {
$sortable = document.getElementById('sortable');
$statics = $('.static').detach(); // detach() 方法移除被选元素，包括所有文本和子节点。即移除所有.static元素
$helper = $('<li></li>').prependTo($sortable); // 在<li></li>中插入内容,此处this指 #sortable
$statics.each(function () {
var $this = $(this);
var target = $this.data('pos'); // 取回附加数据，即index
// 1、$('div','li')是$(子，父)，是从父节点里找子，而不是找li外面的div。
// $('li', $sortable).eq(target) 是所有的节点
// 在$('li', $sortable).eq(target)中插入 $this
$this.insertAfter($('li', $sortable).eq(target)); // 在之后插入 拖拽元素
});
$helper.remove();
},
})
</script>
</body>
</html>
效果：
评论列表
已有0条评论