javascript - 如何进行谷歌互动
问题描述
let arr = [0,1,2,3,4,5];
let clickIndex;
let isClicked = false;
function dragenter (index,ev) {
if(isClicked) {
let imsi = arr[index];
let gizon = arr[clickIndex];
arr.splice(clickIndex,1, imsi);
arr.splice(index,1,gizon);
}
}
function mouseClick (index,ev) {
clickIndex = index;
isClicked = true;
if (isClicked) {
if (!ev.target.classList.contains("picked")){
ev.target.classList.add("picked");
}
}
}
function mouseMove (ev) {
if (isClicked) {
let pick = document.querySelector(".picked");
if(pick){
pick.style.top= `${ev.clientY}px`;
pick.style.left=`${ev.clientX}px`;
}
}
}
var vm = new Vue({
el: '#example',
data: {
arr:arr,
picked: false,
},
methods:{
dragenter:dragenter,
mouseClick:mouseClick,
mouseMove:mouseMove,
}
})
document.addEventListener("mouseup", (ev)=>{
isClicked = false;
let pick = document.querySelector(".picked");
if(pick){
pick.classList.remove("picked");
pick.style="";
}
});
document.addEventListener("mousemove", mouseMove);
.list-move {
transition: transform 1s;
}
.itemBox {
margin: 5px;
border: 20px;
height: 100px;
width: 50px;
background-color: hsla(120, 100%, 50%, 0.3);
/* pointer-events: none; */
}
.picked {
position: fixed;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="example">
<transition-group name="list" tag="div">
<div v-bind:class="{itemBox: true }" v-bind:key="item" v-for="(item,index) in arr" draggable=false v-on:mouseenter="dragenter(index,$event)"
v-on:mousedown="mouseClick(index,$event)" >
{{item}}
</div>
</transition-group>
</div>
</body>
</html>
我想实现谷歌主页的交互。但是,它无法解决。如何让它在我的代码中工作或我要搜索什么?我是新手。
下面是我实现的代码。
https://jsbin.com/yuxojifuxe/edit?html,css,js,输出
解决方案
如果您想要拖放功能,最好的办法是寻求已经制定的解决方案,例如:https ://github.com/SortableJS/Vue.Draggable
推荐阅读
- python - Pygame.spritecollide() 检测精灵之间的碰撞,即使它们没有接触
- c++ - 如何在 C++ 中使用非静态成员函数作为回调
- python - 如何将字符串转换为字典,如果相同的键出现两次,则将其值设为列表
- python - Pandas 在对字符串执行操作时应用给出浮点错误
- angular - ExpressionChangedAfterItHasBeenCheckedError 平均堆栈
- java - 如何使用 HttpURLConnection 以与 Apache HttpClient lib 相同的方式发出 POST 请求
- python - scikit 图像和 Numpy 的 Python 图像处理
- css - Flexbox 图像高度调整大小
- javascript - 将数组元素转换为对象键 - JavaScript
- javascript - 将指令从组件应用到子组件