|
|
@@ -39,7 +39,11 @@
|
|
|
placeholder="请填写描述说明"
|
|
|
/>
|
|
|
<div class="choices">
|
|
|
- <div class="choice" v-for="(item, index) in cJson.array" :key="index">
|
|
|
+ <div class="choice" :class="{dragTop:(dragIndex!=index&&dragNewIndex==index&&dragIndex>index),dragBottom:(dragIndex!=index&&dragNewIndex==index&&dragIndex<index)}" v-for="(item, index) in cJson.array" :key="index" :draggable="dragIndex==index" @dragStart="dragStart(index)" @dragover.prevent="dragOver(index)" @dragend="dragEnd()">
|
|
|
+ <span class="dragIcon" @mousedown="setDrag(index)" @mouseup="clearDrag()">
|
|
|
+ <img v-if="dragIndex===index" src="../../../../../../assets/icon/test/drag_icon.png">
|
|
|
+ <img v-else src="../../../../../../assets/icon/test/drag_icon_active.png">
|
|
|
+ </span>
|
|
|
<div
|
|
|
class="choice_c"
|
|
|
v-if="cJson.type == 2"
|
|
|
@@ -68,13 +72,13 @@
|
|
|
placeholder="请输入选项标题"
|
|
|
/>
|
|
|
|
|
|
- <div class="changeIndex">
|
|
|
+ <!-- <div class="changeIndex">
|
|
|
<span @click.stop="changeIndex(index,0)">
|
|
|
<svg t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg>
|
|
|
</span>
|
|
|
<span @click.stop="changeIndex(index,1)">
|
|
|
<svg style="transform: rotate(180deg);" t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg></span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<span
|
|
|
@click.stop="deleteChoice(index)"
|
|
|
@@ -111,14 +115,14 @@
|
|
|
@keyup.enter="save"
|
|
|
placeholder="请输入选项标题"
|
|
|
/>
|
|
|
-
|
|
|
+<!--
|
|
|
<div class="changeIndex">
|
|
|
<span @click.stop="changeIndex(index,0)">
|
|
|
<svg t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg>
|
|
|
</span>
|
|
|
<span @click.stop="changeIndex(index,1)">
|
|
|
<svg style="transform: rotate(180deg);" t="1737082063936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" width="200" height="200"><path d="M908.8 787.2 512 396.8l-396.8 396.8c-25.6 25.6-70.4 25.6-96 0s-25.6-70.4 0-96l441.6-441.6C480 236.8 492.8 230.4 512 230.4s32 6.4 51.2 19.2l441.6 441.6c25.6 25.6 25.6 70.4 0 96C979.2 819.2 934.4 819.2 908.8 787.2z" p-id="4413"></path></svg></span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<span
|
|
|
@click.stop="deleteChoice(index)"
|
|
|
@@ -139,6 +143,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import draggable from 'vuedraggable';
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
cJson: {
|
|
|
@@ -168,7 +174,9 @@ export default {
|
|
|
answer: false,
|
|
|
detail:false,
|
|
|
answerIndex: 0
|
|
|
- }
|
|
|
+ },
|
|
|
+ dragIndex:null,
|
|
|
+ dragNewIndex:null,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -260,6 +268,36 @@ export default {
|
|
|
this.checkJson.array.splice(index + 1, 0, item);
|
|
|
// this.$message.info("下移");
|
|
|
}
|
|
|
+ },
|
|
|
+ setDrag(index){
|
|
|
+ this.dragIndex = index;
|
|
|
+ },
|
|
|
+ clearDrag(){
|
|
|
+ this.dragIndex = null;
|
|
|
+ },
|
|
|
+ dragStart(index){
|
|
|
+
|
|
|
+ },
|
|
|
+ dragOver(index){
|
|
|
+ this.dragNewIndex = index;
|
|
|
+ },
|
|
|
+ dragEnd(){
|
|
|
+ if(this.dragIndex == this.dragNewIndex){
|
|
|
+ this.dragIndex = null;
|
|
|
+ this.dragNewIndex = null;
|
|
|
+ return;
|
|
|
+ }else{
|
|
|
+ const item = this.checkJson.array.splice(this.dragIndex, 1)[0];
|
|
|
+ this.checkJson.array.splice(this.dragNewIndex, 0, item);
|
|
|
+
|
|
|
+ // if(this.dragIndex > this.dragNewIndex){
|
|
|
+ // console.log("上面")
|
|
|
+ // }else if(this.dragIndex < this.dragNewIndex){
|
|
|
+ // console.log("下面")
|
|
|
+ // }
|
|
|
+ this.dragIndex = null;
|
|
|
+ this.dragNewIndex = null;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -285,6 +323,7 @@ export default {
|
|
|
|
|
|
.choice_box > .choices > .choice {
|
|
|
word-break: break-all;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.choice_box > .choices > .choice + .choice {
|
|
|
margin-top: 5px;
|
|
|
@@ -299,7 +338,8 @@ export default {
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
position: relative;
|
|
|
- width: calc(100% - 50px - 50px);
|
|
|
+ width: calc(100% - 50px - 50px - 25px);
|
|
|
+ margin-left: 25px;
|
|
|
}
|
|
|
.choice_box > .choices > .choice > .choice_c > span {
|
|
|
/* padding-right: 50px; */
|
|
|
@@ -338,7 +378,7 @@ export default {
|
|
|
min-width: 25px;
|
|
|
min-height: 25px;
|
|
|
position: absolute;
|
|
|
- right: -60px;
|
|
|
+ right: -30px;
|
|
|
transform: translateY(2px);
|
|
|
border-radius: 5px;
|
|
|
color: #646a73 !important;
|
|
|
@@ -393,4 +433,37 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
+.dragIcon{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0,-60%);
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.dragIcon>img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dragTop::after{
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ background-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.dragBottom::after{
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -6px;
|
|
|
+ background-color: #409EFF;
|
|
|
+}
|
|
|
</style>
|
SanHQin