js原生 jquery-sortable–拖拽排序
SortableJS 中文网址: http://www.sortablejs.com/
借鉴文档： http://www.itxst.com/sortablejs/neuinffi.html
拖拽排序
别的不多说了，直接上例子，记得引入jQuery.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable jQuery</title>
<script src="http://www.itxst.com/package/sortable/sortable.min.js"></script>
<style>
body.dragging,
body.dragging * {
cursor: pointer !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
cursor: pointer;
}
ol.example li.placeholder {
position: relative;
}
ol.example li.placeholder:before {
position: absolute;
}
.max_phone {
display: flex;
justify-content: space-around;
}
.example li {
cursor: pointer;
}
</style>
</head>
<body>
<h3>点击下方拖拽排序</h3>
<div class="max_phone">
<ol class='examples' id="examples">
<li>Dome-01</li>
<li>Dome-02</li>
<li>Dome-03</li>
<li>Dome-04</li>
<li>Dome-05</li>
</ol>
</div>
<script>
$(function () {
Sortable.create(document.getElementById('examples'), {
animation: 150, //动画参数
onAdd: function (evt) { //拖拽时候添加有新的节点的时候发生该事件
console.log('onAdd.foo:', [evt.item, evt.from]);
},
onUpdate: function (evt) { //拖拽更新节点位置发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from]);
},
onRemove: function (evt) { //删除拖拽节点的时候促发该事件
console.log('onRemove.foo:', [evt.item, evt.from]);
},
onStart: function (evt) { //开始拖拽出发该函数
console.log('onStart.foo:', [evt.item, evt.from]);
},
onSort: function (evt) { //发生排序发生该事件
console.log('onSort.foo:', [evt.item, evt.from]);
},
onEnd: function (evt) { //拖拽完毕之后发生该事件
var itemEl = evt.item; // 拖拽的元素
console.log(evt.to);//推拽之后的目标列表
console.log(evt.from);//推拽之前的目标列表
console.log(evt.oldIndex);//拖拽之前的索引值
console.log(evt.newIndex);//拖拽之后的新的索引值
console.log(evt.clone);//这是克隆的元素
console.log(evt.pullMode);//当项目在另一个可排序中时：如果是克隆，则为“克隆”；如果是移动，则为“true”
}
});
})
</script>
</body>
</html>
从A列表克隆到B列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sortable.js 拖拽时从A组克隆到B组例子</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="http://www.itxst.com/package/sortable/sortable.min.js"></script>
<style>
.box {}
.itxst {
margin: 10px auto;
width: 30%;
float: left;
margin-right: 10px;
}
.itxst div {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
#msg {
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div id="g1" class="itxst">
<div class="item" data-id="1">item 1</div>
<div class="item" data-id="2">item 2</div>
<div class="item" data-id="3">item 3</div>
</div>
<div id="g2" class="itxst">
<div class="item" data-id="4">www.itxst.com</div>
<div class="item" data-id="5">www.google.com</div>
<div class="item" data-id="6">www.baidu.com</div>
</div>
</div>
<div id="msg"></div>
<script>
//第一组
var g1 = document.getElementById('g1');
var ops1 = {
animation: 1000,
draggable: ".item",
group: { name: "itxst.com", pull: 'clone', put: false },
//拖动结束
onEnd: function (evt) {
// console.log(evt.target.children);
},
};
var sortable1 = Sortable.create(g1, ops1);
//第二组
var g2 = document.getElementById('g2');
var ops2 = {
animation: 1000,
draggable: ".item",
group: { name: "itxst.com", pull: true, put: true },
//拖动结束
onEnd: function (evt) {
console.log(evt);
//获取拖动后的排序
var arr = sortable2.toArray();
document.getElementById("msg").innerHTML = "B组排序结果：" + JSON.stringify(arr);
},
onAdd: function (evt) { //拖拽时候添加有新的节点的时候发生该事件
var itemEl = evt.item; // 拖拽的元素
console.log(evt.to);//推拽之后的目标列表
console.log(evt.from);//推拽之前的目标列表
console.log(evt.oldIndex);//拖拽之前的索引值
console.log(evt.newIndex);//拖拽之后的新的索引值
console.log(evt.clone);//这是克隆的元素
console.log(evt.pullMode);//当项目在另一个可排序中时：如果是克隆，则为“克隆”；如果是移动，则为“true”
},
};
var sortable2 = Sortable.create(g2, ops2);
</script>
</body>
</html>
左侧，右侧相互联动拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sortable.js例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/Sortable.min.js"></script>
<style>
.dome{
display: flex;
justify-content: space-around;
}
#itxst,#itxsts {
margin: 10px auto;
width: 80%;
}
#itxst div,#itxsts div {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
</style>
</head>
<body>
<div class="dome">
<!-- 左侧 -->
<div id="itxst" class="itxst">
</div>
<!-- 右侧 -->
<div id="itxsts" class="itxst">
</div>
</div>
<script>
var data = ['item1','item2','item3']
leftSort()
rightSort()
devDom ()
function devDom (){
var dev = ``;
data.forEach((element,eleIndex) => {
dev+=`<div class='item' data-id="${eleIndex}">${element}</div>`;
});
$('#itxst').html(dev)
$('#itxsts').html(dev)
}
function leftSort(){
//获取对象
var el = document.getElementById('itxst');
//设置配置
var ops = {
animation: 1000,
draggable: ".item",
group: { name: "itxst.com", pull: true, put: true },
//拖动结束
onEnd: function (evt) {
var documentType = [];
var domArr = [];
/* 伪数组，转换 */
domArr = Array.from(evt.target.children)
//获取每个节点最初的位置索引；根据索引值所在当前位置重新排序；
domArr.forEach((item, index) => {
documentType.push(item.dataset.id);
});
var Arry = [];
for (let i = 0; i < documentType.length; i++) {
Arry.push(data[documentType[i]]);
}
data = Arry;
// 更新dom数中的索引值；
domArr.forEach((item, index) => {
item.dataset.id = index;
});
devDom()
},
};
//初始化
var sortable = Sortable.create(el, ops);
}
function rightSort(){
//获取对象
var el = document.getElementById('itxsts');
//设置配置
var ops = {
animation: 1000,
draggable: ".item",
group: { name: "itxst.com", pull: 'clone', put: false },
//拖动结束
onEnd: function (evt) {
var documentType = [];
var domArr = [];
/* 伪数组，转换 */
domArr = Array.from(evt.target.children)
//获取每个节点最初的位置索引；根据索引值所在当前位置重新排序；
domArr.forEach((item, index) => {
documentType.push(item.dataset.id);
});
var Arry = [];
for (let i = 0; i < documentType.length; i++) {
Arry.push(data[documentType[i]]);
}
data = Arry;
// 更新dom数中的索引值；
domArr.forEach((item, index) => {
item.dataset.id = index;
});
devDom()
},
};
//初始化
var sortable = Sortable.create(el, ops);
}
</script>
</body>
</html>
vue-draggable 的学习和使用
-
下载 vue-draggable
npm i -S vuedraggable -
页面中引用 vue-draggable
<template>
<div class="">
<div class="col">
<draggable
v-model="arr1"
:options="{ group: { name: 'itxst', pull: 'clone' }, sort: true }"
animation="300"
>
</div>
</div>
</div>
</template>
import draggable from "vuedraggable";
export default {
components: { draggable }
}
实现拖拽布局占位热区
使用组件
vue-draggable-resizable 可拖拽缩放的组件
演示路线：vue-draggable-resizable
- 在可控区域多个拖拽占位实现占位热区点击跳转
<template>
<div>
<h1>拖拽热点</h1>
<el-button @click="addHotZone">添加热区</el-button>
<div class='p-event'>
<vue-draggable-resizable v-for="(item, index) in elements" :key="item.id" :w="item.width" :h="item.height"
:x="item.x" :y="item.y" @dragging="(x, y, width, height) => onDragg(index, x, y, width, height)"
@resizing="(x, y, width, height) => onResize(index, x, y, width, height)" parent=".p-event">
X轴: {{ item.x }} <br /> Y轴: {{ item.y }} <br /> 宽: {{ item.width }} <br /> 高: {{ item.height }}
</vue-draggable-resizable>
</div>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable' // 拖拽缩放插件
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
components: {
VueDraggableResizable
},
name: '',
data() {
return {
elements: [
{
width: 160,
height: 100,
x: 140,
y: 0
}
],
};
},
created() {
},
mounted() {
},
computed: {},
watch: {},
methods: {
addHotZone() {
this.elements.push({
width: 120,
height: 120,
x: Math.floor(Math.random() * (20 + 1)),
y: Math.floor(Math.random() * (40 + 1))
})
},
// 缩放时触发
onResize(index, x, y, width, height) {
let item = {
x, y, width, height
}
this.$set(this.elements, index, item)
},
// 拖拽式触发
onDragg(index, x, y, width, height) {
let item = {
x, y, width, height
}
console.log('拖拽式触发');
this.$set(this.elements, index, item)
}
},
};
</script>
<style lang='less' scoped>
.p-event {
width: 300px;
height: 400px;
border: 1px solid red;
}
</style>
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
