<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<meta content="email=no" name="format-detection" />
<meta name="msapplication-tap-highlight" content="no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/vue.min.js"></script>
<title>H5拖放</title>
<style>
.square{
width: 200px;
height: 50px;
line-height: 50px;
margin-bottom: 60px;
text-align: center;
background-color: #5BC0DE;
font-size: 20px;
color: #fff;
}
.big_box{
width: 400px;
height: 200px;
background-color: #006600;
}
</style>
</head>
<body>
<div id="vueBox">
<div class="square" v-for="(item,$index) in squareList"
@dragstart="dragstart($index,$event)"
@dragend="dragend($event)" @drop="drop($index,$event)" @dragover="dragover($event)"
draggable="true">{{item.index}}</div>
<div class="big_box" @drop="drop($event)" @dragover="allowDrop($event)"></div>
</div>
<script>
var vm = new Vue({
el:"#vueBox",
data:{
squareList:[],
moveIndex:null,
targetIndex:null
},
methods:{
dragstart:function(index){
var that = this;
console.log("拖放开始",index);
that.moveIndex = index;
},
dragover:function(event){ //必须添加dragover事件,不然drop事件也无效
event.preventDefault();
},
dragend:function(event){
console.log("拖放结束",event.currentTarget);
},
drop:function(index,event){
var that = this;
//阻止默认行为
event.preventDefault();
//阻止默认行为
event.stopPropagation();
console.log("拖放到目标",index);
that.targetIndex = index;
//先保存拖动元素index
var temp = that.squareList[that.moveIndex].index;
//将拖动元素位置index换成目标元素的index
that.squareList[that.moveIndex].index = that.squareList[that.targetIndex].index;
//将目标元素位置index换成拖动元素的index
that.squareList[that.targetIndex].index = temp;
console.log(JSON.stringify(that.squareList));
},
allowDrop:function(event){
event.preventDefault();
},
getSquareList:function(){
var that = this;
for(var i=0;i<4;i++){
(function(i){
var obj = {
index:i,
}
that.squareList.push(obj);
}(i))
}
}
},
mounted:function(){
var that = this;
that.getSquareList();
}
});
</script>
</body>
</html>
vue 通过拖拽更换两元素位置(同一个数组或列表)
猜你喜欢
转载自my.oschina.net/daladida/blog/1808071
今日推荐
周排行