|
|
@@ -20,12 +20,24 @@
|
|
|
<el-button type="text">成员</el-button>
|
|
|
<el-button type="text" v-if="RoomInfo.userid == userid" @click="dismiss">解散房间</el-button>
|
|
|
</div>
|
|
|
+ <draggable
|
|
|
+ element="div"
|
|
|
+ v-model="data"
|
|
|
+ class="g_body"
|
|
|
+ @change="handleDraggableFormItemChange"
|
|
|
+ @end="dragEnd"
|
|
|
+ :move="checkMove"
|
|
|
+ >
|
|
|
<div
|
|
|
v-for="(item,index) in data"
|
|
|
:key="index"
|
|
|
class="g_box"
|
|
|
@mouseover="pIndex = index"
|
|
|
@mouseleave="pIndex = ''"
|
|
|
+ @dragstart="handleDragStart($event, index)"
|
|
|
+ @dragover.prevent="handleDragOver($event, index)"
|
|
|
+ @dragenter="handleDragEnter($event, index)"
|
|
|
+ @dragend="handleDragEnd($event, index)"
|
|
|
>
|
|
|
<div
|
|
|
:class="{'left-popover':index<3,'right-popover':index==3,'top-popover':index>3,'visibleO':pIndex === index && item && (item.video || item.photo)}"
|
|
|
@@ -45,7 +57,7 @@
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="item && item.remarks"
|
|
|
- :class="{'remark-right-popover':index>12 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
|
|
|
+ :class="{'remark-right-popover':index>11 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
|
|
|
>
|
|
|
<div class="Rbox" v-for="(x,y) in item.remarks" :key="y">
|
|
|
<div v-if="x.remarks!=''" style="display:flex">
|
|
|
@@ -75,6 +87,7 @@
|
|
|
@click="check(index,3)"
|
|
|
></el-image>
|
|
|
</div>
|
|
|
+ </draggable>
|
|
|
<el-dialog
|
|
|
title="上传文件"
|
|
|
:visible.sync="dialogVisible"
|
|
|
@@ -234,7 +247,12 @@
|
|
|
|
|
|
<script>
|
|
|
import Clipboard from "clipboard";
|
|
|
+import draggable from "vuedraggable";
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ //调用组件
|
|
|
+ draggable,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
timer: null,
|
|
|
@@ -284,9 +302,70 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
playerO: {},
|
|
|
+ dragging:null,
|
|
|
+ draggingE:null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleDragStart(e, items) {
|
|
|
+ this.dragging = items; //开始拖动时，暂时保存当前拖动的数据。
|
|
|
+ if(!this.data[items]){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleDragEnd(e, items) {
|
|
|
+ if(!this.data[this.dragging]){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
|
|
|
+ if (this.draggingE == this.dragging) return;
|
|
|
+ var newItems = [...JSON.parse(JSON.stringify(this.data))]; //拷贝一份数据进行交换操作。
|
|
|
+
|
|
|
+ var src = newItems[this.dragging]; //获取数组下标
|
|
|
+ var dst = newItems[this.draggingE];
|
|
|
+ newItems[this.dragging] = dst
|
|
|
+ newItems[this.draggingE] = src
|
|
|
+ // newItems2.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
|
|
|
+ this.data = newItems;
|
|
|
+ this.updateRoomData();
|
|
|
+ this.dragging = null; //拖动结束后，清除数据
|
|
|
+ this.draggingE=null;
|
|
|
+ },
|
|
|
+ handleDragOver(e) {
|
|
|
+ e.dataTransfer.dropEffect = "move"; //在dragenter中针对放置目标来设置!
|
|
|
+ },
|
|
|
+ handleDragEnter(e, items) {
|
|
|
+ this.draggingE = items;
|
|
|
+ e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
|
|
|
+ // if (items == this.dragging) return;
|
|
|
+ // var newItems = [...JSON.parse(JSON.stringify(this.data))]; //拷贝一份数据进行交换操作。
|
|
|
+ // var src = this.dragging; //获取数组下标
|
|
|
+ // var dst = items;
|
|
|
+ // newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
|
|
|
+ // this.data = newItems;
|
|
|
+ // this.updateRoomData();
|
|
|
+ },
|
|
|
+ handleDraggableFormItemChange(val) {
|
|
|
+ // console.log(val);
|
|
|
+ // console.log(this.data[val.moved.newIndex]);
|
|
|
+ // console.log(this.data[val.moved.oldIndex]);
|
|
|
+ },
|
|
|
+ dragEnd(val) {
|
|
|
+ // if (this.data[val.newIndex].userid != this.userinfo.userid) {
|
|
|
+ // this.$message.error("不是您上传的作品不能拖动哦");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // this.updateRoomData();
|
|
|
+ },
|
|
|
+ checkMove(evt) {
|
|
|
+ // console.log(evt);
|
|
|
+ // if (evt.draggedContext.element.userid != this.userinfo.userid) {
|
|
|
+ // return false;
|
|
|
+ // } else {
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
copy() {
|
|
|
this.copyText =
|
|
|
this.$refs.inviteT.innerHTML +
|
|
|
@@ -436,7 +515,9 @@ export default {
|
|
|
},
|
|
|
];
|
|
|
}
|
|
|
- this.data[this.gIndex].userid = this.userinfo ? this.userinfo.userid : this.userid;
|
|
|
+ this.data[this.gIndex].userid = this.userinfo
|
|
|
+ ? this.userinfo.userid
|
|
|
+ : this.userid;
|
|
|
} else {
|
|
|
if (!this.remarks) {
|
|
|
this.$message.error("备注不能为空");
|
|
|
@@ -628,6 +709,8 @@ export default {
|
|
|
this.data = JSON.parse(res.data[0][0].data);
|
|
|
this.dialogVisible3 = false;
|
|
|
this.dialogVisible2 = true;
|
|
|
+ // this.data.splice(0,1)
|
|
|
+ // this.updateRoomData()
|
|
|
this.timer = setInterval(() => {
|
|
|
this.selectRoom2(uid);
|
|
|
}, 5000);
|
|
|
@@ -709,6 +792,7 @@ export default {
|
|
|
for (var i = 0; i < 16; i++) {
|
|
|
this.data.push("");
|
|
|
}
|
|
|
+ this.data.push("")
|
|
|
this.getUser();
|
|
|
this.selectRoom(this.userid);
|
|
|
},
|
|
|
@@ -732,6 +816,7 @@ export default {
|
|
|
position: absolute;
|
|
|
width: 50px;
|
|
|
z-index: 1;
|
|
|
+ user-select: none;
|
|
|
}
|
|
|
.coin1 {
|
|
|
top: 10px;
|
|
|
@@ -761,6 +846,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
/* overflow: hidden; */
|
|
|
position: relative;
|
|
|
+ user-select: none;
|
|
|
}
|
|
|
.photo_img {
|
|
|
width: 100%;
|
zengyicheng