Bagaimana untuk melaksanakan fungsi kotak ulang-alik seret dan lepas? Artikel berikut akan memperkenalkan kepada anda empat cara untuk melaksanakan fungsi kotak ulang-alik seret dan lepas dalam Vue saya harap ia akan membantu anda.
[Cadangan berkaitan: tutorial video vuejs]
Klik untuk membuka video untuk penjelasan lebih terperinci
<meta>
<title>Lazyload</title>
<style>
.drag {
background-color: skyblue;
position: absolute;
line-height: 100px;
text-align: center;
width: 100px;
height: 100px;
}
</style>
<!-- left和top要写在行内样式里面 -->
<div>按住拖动</div>
<script></script>
<script>
// 获取DOM元素
let dragDiv = document.getElementsByClassName('drag')[0]
// 鼠标按下事件 处理程序
let putDown = function (event) {
dragDiv.style.cursor = 'pointer'
let offsetX = parseInt(dragDiv.style.left) // 获取当前的x轴距离
let offsetY = parseInt(dragDiv.style.top) // 获取当前的y轴距离
let innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
let innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
// 按住鼠标时为div添加一个border
dragDiv.style.borderStyle = 'solid'
dragDiv.style.borderColor = 'red'
dragDiv.style.borderWidth = '3px'
// 鼠标移动的时候不停的修改div的left和top值
document.onmousemove = function (event) {
dragDiv.style.left = event.clientX - innerX + 'px'
dragDiv.style.top = event.clientY - innerY + 'px'
// 边界判断
if (parseInt(dragDiv.style.left) <= 0) {
dragDiv.style.left = '0px'
}
if (parseInt(dragDiv.style.top) <= 0) {
dragDiv.style.top = '0px'
}
if (
parseInt(dragDiv.style.left) >=
window.innerWidth - parseInt(dragDiv.style.width)
) {
dragDiv.style.left =
window.innerWidth - parseInt(dragDiv.style.width) + 'px'
}
if (
parseInt(dragDiv.style.top) >=
window.innerHeight - parseInt(dragDiv.style.height)
) {
dragDiv.style.top =
window.innerHeight - parseInt(dragDiv.style.height) + 'px'
}
}
// 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
// 否则鼠标抬起后还可以继续拖拽方块
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
// 清除border
dragDiv.style.borderStyle = ''
dragDiv.style.borderColor = ''
dragDiv.style.borderWidth = ''
}
}
// 绑定鼠标按下事件
dragDiv.addEventListener('mousedown', putDown, false)
</script>
<template>
<div>
<h3>拖拽穿梭框</h3>
<div>
<div>
<span>
<span>{{ item.label }}</span>
<span>X</span> >
</span>
</div>
<div>
<span>
<span>{{ item.label }}</span>
<span>X</span> >
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
leftData: [
{ label: "首页", id: 1 },
{ label: "咨询", id: 2 },
{ label: "生活", id: 3 },
{ label: "财富", id: 4 },
{ label: "我的", id: 5 },
],
rightData: [{ label: "世界", id: 6 }],
isMoveTrue: false,
isMove: false,
moveId: "",
};
},
mounted() {},
components: {},
methods: {
mousedown(index, val) {
this.isMoveTrue = true;
if (val == 1) {
this.moveId = "mouse" + index;
} else {
this.moveId = "deleteMouse" + index;
}
},
mousemove(event) {
if (this.isMoveTrue) {
this.isMove = true;
document.getElementById(this.moveId).style.position = "absolute";
document.getElementById(this.moveId).style.top = event.clientY + "px";
document.getElementById(this.moveId).style.left = event.clientX + "px";
document.getElementById(this.moveId).style.transform =
"translate(-50%,-50%)";
}
},
mouseup(item, val, index) {
if (!this.isMove) {
this.isMoveTrue = false;
this.moveId = "";
}
if (this.isMoveTrue && val == 2) {
this.$nextTick(() => {
this.rightData.splice(index, 1);
this.leftData.push(item);
});
} else if (this.isMoveTrue && val) {
this.leftData.splice(index, 1);
this.rightData.push(item);
}
document.getElementById(this.moveId).style.display = "none";
this.isMoveTrue = false;
this.isMove = false;
this.moveId = "";
},
handerClickX(item, index, val) {
if (val == 1) {
this.leftData.splice(index, 1);
this.rightData.push(item);
} else {
this.rightData.splice(index, 1);
this.leftData.push(item);
}
},
},
};
</script>
<style>
#home {
display: flex;
justify-content: space-around;
}
.tree-select-content {
width: 40%;
height: 300px;
background: #f9faff;
border: 1px solid #dee0ec;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-content: baseline;
}
.select-content {
width: max-content;
height: 20px;
padding: 1.6%;
border: 1px solid #d6dbed;
margin: 2% 1% 0;
background: #ffffff;
box-shadow: 0 0 8px 0 rgba(72, 119, 236, 0.1);
border-radius: 4px;
}
.select-content:hover span {
color: #4877ec;
}
.select-content:hover {
cursor: pointer;
background: #f8faff;
border: 1px solid #3e75f4;
}
.select-text {
font-size: 15px;
color: #2e2f36;
text-align: center;
font-weight: 400;
}
.select-text-X {
font-size: 15px;
color: #4877ec;
letter-spacing: 0;
font-weight: 400;
margin-left: 12px;
cursor: pointer;
}
</style>Rendering:
vuedraggablePenggunaan: transition-group
Apabila digunakan, anda boleh mengikat data setempat dalam dua arah melalui v-model, jika anda perlu mengemas kini atau mencetuskan pemantauan komponen induk Peristiwa boleh dipancarkan dalam kemas kini().
yarn add vuedraggable import vuedraggable from 'vuedraggable';
4. Pakej arahan Awe-dnd
<template>
<div>
<div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
<!--使用draggable组件-->
<draggable>
<transition-group>
<div>
{{ element.name }}
</div>
</transition-group>
</draggable>
<div>
<div>
{{ color.text }}
</div>
</div>
</div>
</template>
<style>
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 1px #3089dc !important;
}
</style>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag: false,
//定义要被拖拽对象的数组
myArray: [
{ people: "cn", id: 10, name: "www.itxst.com" },
{ people: "cn", id: 20, name: "www.baidu.com" },
{ people: "cn", id: 30, name: "www.taobao.com" },
{ people: "us", id: 40, name: "www.yahoo.com" },
],
colors: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
{
text: "Crimson",
},
{
text: "Blueviolet",
},
{
text: "Lightblue",
},
{
text: "Cornflowerblue",
},
{
text: "Skyblue",
},
{
text: "Burlywood",
},
],
};
},
methods: {
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
},
},
};
</script>main.js
npm install awe-dnd --save yarn add awe-and
Kes:
import VueDND from 'awe-dnd' Vue.use(VueDND)
(Mempelajari perkongsian video: pembangunan bahagian hadapan web
,<template>
<div>
<div>
<div>
{{ color.text }}
</div>
</div>
</div>
</template>
<style>
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 1px #3089dc !important;
}
</style>
<script>
export default {
data() {
return {
drag: false,
colors: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
{
text: "Crimson",
},
{
text: "Blueviolet",
},
{
text: "Lightblue",
},
{
text: "Cornflowerblue",
},
{
text: "Skyblue",
},
{
text: "Burlywood",
},
],
};
},
methods: {},
};
</script>Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi kotak ulang-alik seret dan lepas? Empat cara untuk memperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
