序文
- 公式ウェブサイト - http://www.sortablejs.com/index.html
- 中国語のドキュメント - https://www.itxst.com/sortablejs/neuinffi.html
- npm - https://www.npmjs.com/package/sortablejs
npmダウンロード
npm i sortablejs
うーん
<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
例
const el = document.querySelector('.template-group')//拖拽的父元素
new Sortable(el, {
group: {
name: "z", pull: true, put: true },
filter: '.viz-group',// 过滤
draggable: ".viz-item",//拖拽的元素
animation: 300,//动画时间
handle: ".viz-move",//拖拽句柄 - 就是要拖拽的子元素
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',//动效
ghostClass: 'drop-select',//拖拽class
})
ドラッグハンドルの説明
以下に示すように
- ドラッグハンドルが設定されており、赤枠の要素をドラッグする場合、黄色枠がドラッグハンドルとなります。
- 赤枠要素はハンドルをドラッグする場合のみドラッグ可能です
デモ
デモ.html
<style>
.box {
width: 200px;
max-width: 220px;
}
.item,
.title {
display: flex;
justify-content: space-between;
height: 30px;
align-items: center;
border: solid 1px #ccc;
border-style: none none solid solid;
}
.title {
background-color: #f4f4f4;
}
.move {
background-color: rgb(116, 199, 202);
width: 30px;
height: 100%;
cursor: grab;
}
.move:hover {
background-color: cadetblue;
}
/* 拖拽样式 */
.drop-select {
background: rgba(18, 188, 255, 0.25);
}
</style>
<body>
<div class="box">
<!-- .item拖拽的元素 -->
<div class="item">
<div class="item-grid">文本1</div>
<!-- .move 拖拽的句柄 -->
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">文本2</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">文本3</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">文本4</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">文本5</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">文本6</div>
<div class="move"></div>
</div>
<div class="title">更多</div>
<div class="item">
<div class="item-grid">6666</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">7777</div>
<div class="move"></div>
</div>
<div class="item">
<div class="item-grid">520</div>
<div class="move"></div>
</div>
</div>
<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
<script>
const el = document.querySelector(".box");
new Sortable(el, {
group: {
name: "group1", pull: true, put: true },
filter: ".title", // 过滤
draggable: ".item", //拖拽的元素
animation: 300, //动画时间
handle: ".move", //拖拽句柄 - 就是要拖拽的子元素
easing: "cubic-bezier(0.16, 1, 0.3, 1)", //动效
ghostClass: "drop-select", //拖拽class
});
</script>
</body>
効果
ドラッグする前
ドラッグする
ドラッグ後
