|
|
@@ -132,56 +132,65 @@
|
|
|
class="add_chapters_box"
|
|
|
style="display: flex; flex-direction: column"
|
|
|
>
|
|
|
- <div
|
|
|
- class="chapter_upload"
|
|
|
- v-for="(item, index) in raceOver.driQuestion.data"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <div class="chapter_upload_t"></div>
|
|
|
- <div class="chapter_upload_o">
|
|
|
- <div class="chapter_upload_l">
|
|
|
- <div
|
|
|
- v-if="item.type == 2"
|
|
|
- class="chapter_upload_l_i1"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- v-if="item.type == 1 || item.type == 3"
|
|
|
- class="chapter_upload_l_i5"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_ic">
|
|
|
- <div class="chapter_upload_ic_l"></div>
|
|
|
- <div
|
|
|
- class="chapter_upload_ic_r"
|
|
|
- @click.stop="deleteChapterData($event, index, 0)"
|
|
|
- >
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_n">
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item.type == 1 || item.type == 3"
|
|
|
- :placeholder="item.name"
|
|
|
- />
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item.type == 2"
|
|
|
- :placeholder="item.name"
|
|
|
- />
|
|
|
- <div class="chapter_upload_ud">
|
|
|
+ <transition-group tag="div">
|
|
|
+ <div
|
|
|
+ class="chapter_upload"
|
|
|
+ v-for="(item, index) in raceOver.driQuestion.data"
|
|
|
+ :key="item.id"
|
|
|
+ draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item)"
|
|
|
+ @dragenter="handleDragEnter($event, item)"
|
|
|
+ @dragend="handleDragEnd($event, item, 0)"
|
|
|
+ >
|
|
|
+ <div class="chapter_upload_t"></div>
|
|
|
+ <div class="chapter_upload_o">
|
|
|
+ <div class="chapter_upload_l">
|
|
|
<div
|
|
|
- class="chapter_upload_up"
|
|
|
- @click="upCd($event, index, 0)"
|
|
|
+ v-if="item.type == 2"
|
|
|
+ class="chapter_upload_l_i1"
|
|
|
></div>
|
|
|
<div
|
|
|
- class="chapter_upload_down"
|
|
|
- @click="downCd($event, index, 0)"
|
|
|
+ v-if="item.type == 1 || item.type == 3"
|
|
|
+ class="chapter_upload_l_i5"
|
|
|
></div>
|
|
|
</div>
|
|
|
+ <div class="chapter_upload_ic">
|
|
|
+ <div class="chapter_upload_ic_l"></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_ic_r"
|
|
|
+ @click.stop="
|
|
|
+ deleteChapterData($event, index, 0)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_upload_n">
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item.type == 1 || item.type == 3"
|
|
|
+ :placeholder="item.name"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item.type == 2"
|
|
|
+ :placeholder="item.name"
|
|
|
+ />
|
|
|
+ <div class="chapter_upload_ud">
|
|
|
+ <div
|
|
|
+ class="chapter_upload_up"
|
|
|
+ @click="upCd($event, index, 0)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_down"
|
|
|
+ @click="downCd($event, index, 0)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </transition-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="add_info_box">
|
|
|
@@ -281,56 +290,65 @@
|
|
|
class="add_chapters_box"
|
|
|
style="display: flex; flex-direction: column"
|
|
|
>
|
|
|
- <div
|
|
|
- class="chapter_upload"
|
|
|
- v-for="(item1, index1) in raceOver.tarDesign.data"
|
|
|
- :key="item1.id"
|
|
|
- >
|
|
|
- <div class="chapter_upload_t"></div>
|
|
|
- <div class="chapter_upload_o">
|
|
|
- <div class="chapter_upload_l">
|
|
|
- <div
|
|
|
- v-if="item1.type == 2"
|
|
|
- class="chapter_upload_l_i1"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- v-if="item1.type == 1 || item1.type == 3"
|
|
|
- class="chapter_upload_l_i5"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_ic">
|
|
|
- <div class="chapter_upload_ic_l"></div>
|
|
|
- <div
|
|
|
- class="chapter_upload_ic_r"
|
|
|
- @click.stop="deleteChapterData($event, index1, 1)"
|
|
|
- >
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_n">
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item1.type == 1 || item1.type == 3"
|
|
|
- :placeholder="item1.name"
|
|
|
- />
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item1.type == 2"
|
|
|
- :placeholder="item1.name"
|
|
|
- />
|
|
|
- <div class="chapter_upload_ud">
|
|
|
+ <transition-group tag="div">
|
|
|
+ <div
|
|
|
+ class="chapter_upload"
|
|
|
+ v-for="(item1, index1) in raceOver.tarDesign.data"
|
|
|
+ :key="item1.id"
|
|
|
+ draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item1)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item1)"
|
|
|
+ @dragenter="handleDragEnter($event, item1)"
|
|
|
+ @dragend="handleDragEnd($event, item1, 1)"
|
|
|
+ >
|
|
|
+ <div class="chapter_upload_t"></div>
|
|
|
+ <div class="chapter_upload_o">
|
|
|
+ <div class="chapter_upload_l">
|
|
|
<div
|
|
|
- class="chapter_upload_up"
|
|
|
- @click="upCd($event, index1, 1)"
|
|
|
+ v-if="item1.type == 2"
|
|
|
+ class="chapter_upload_l_i1"
|
|
|
></div>
|
|
|
<div
|
|
|
- class="chapter_upload_down"
|
|
|
- @click="downCd($event, index1, 1)"
|
|
|
+ v-if="item1.type == 1 || item1.type == 3"
|
|
|
+ class="chapter_upload_l_i5"
|
|
|
></div>
|
|
|
</div>
|
|
|
+ <div class="chapter_upload_ic">
|
|
|
+ <div class="chapter_upload_ic_l"></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_ic_r"
|
|
|
+ @click.stop="
|
|
|
+ deleteChapterData($event, index1, 1)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_upload_n">
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item1.type == 1 || item1.type == 3"
|
|
|
+ :placeholder="item1.name"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item1.type == 2"
|
|
|
+ :placeholder="item1.name"
|
|
|
+ />
|
|
|
+ <div class="chapter_upload_ud">
|
|
|
+ <div
|
|
|
+ class="chapter_upload_up"
|
|
|
+ @click="upCd($event, index1, 1)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_down"
|
|
|
+ @click="downCd($event, index1, 1)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </transition-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="add_info_box">
|
|
|
@@ -429,56 +447,65 @@
|
|
|
class="add_chapters_box"
|
|
|
style="display: flex; flex-direction: column"
|
|
|
>
|
|
|
- <div
|
|
|
- class="chapter_upload"
|
|
|
- v-for="(item2, index2) in raceOver.actiDesign.data"
|
|
|
- :key="item2.id"
|
|
|
- >
|
|
|
- <div class="chapter_upload_t"></div>
|
|
|
- <div class="chapter_upload_o">
|
|
|
- <div class="chapter_upload_l">
|
|
|
- <div
|
|
|
- v-if="item2.type == 2"
|
|
|
- class="chapter_upload_l_i1"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- v-if="item2.type == 1 || item2.type == 3"
|
|
|
- class="chapter_upload_l_i5"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_ic">
|
|
|
- <div class="chapter_upload_ic_l"></div>
|
|
|
- <div
|
|
|
- class="chapter_upload_ic_r"
|
|
|
- @click.stop="deleteChapterData($event, index2, 2)"
|
|
|
- >
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="chapter_upload_n">
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item2.type == 1 || item2.type == 3"
|
|
|
- :placeholder="item2.name"
|
|
|
- />
|
|
|
- <input
|
|
|
- class="first"
|
|
|
- v-if="item2.type == 2"
|
|
|
- :placeholder="item2.name"
|
|
|
- />
|
|
|
- <div class="chapter_upload_ud">
|
|
|
+ <transition-group tag="div">
|
|
|
+ <div
|
|
|
+ class="chapter_upload"
|
|
|
+ v-for="(item2, index2) in raceOver.actiDesign.data"
|
|
|
+ :key="item2.id"
|
|
|
+ draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item2)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item2)"
|
|
|
+ @dragenter="handleDragEnter($event, item2)"
|
|
|
+ @dragend="handleDragEnd($event, item2, 2)"
|
|
|
+ >
|
|
|
+ <div class="chapter_upload_t"></div>
|
|
|
+ <div class="chapter_upload_o">
|
|
|
+ <div class="chapter_upload_l">
|
|
|
<div
|
|
|
- class="chapter_upload_up"
|
|
|
- @click="upCd($event, index2, 2)"
|
|
|
+ v-if="item2.type == 2"
|
|
|
+ class="chapter_upload_l_i1"
|
|
|
></div>
|
|
|
<div
|
|
|
- class="chapter_upload_down"
|
|
|
- @click="downCd($event, index2, 2)"
|
|
|
+ v-if="item2.type == 1 || item2.type == 3"
|
|
|
+ class="chapter_upload_l_i5"
|
|
|
></div>
|
|
|
</div>
|
|
|
+ <div class="chapter_upload_ic">
|
|
|
+ <div class="chapter_upload_ic_l"></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_ic_r"
|
|
|
+ @click.stop="
|
|
|
+ deleteChapterData($event, index2, 2)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_upload_n">
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item2.type == 1 || item2.type == 3"
|
|
|
+ :placeholder="item2.name"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ class="first"
|
|
|
+ v-if="item2.type == 2"
|
|
|
+ :placeholder="item2.name"
|
|
|
+ />
|
|
|
+ <div class="chapter_upload_ud">
|
|
|
+ <div
|
|
|
+ class="chapter_upload_up"
|
|
|
+ @click="upCd($event, index2, 2)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_down"
|
|
|
+ @click="downCd($event, index2, 2)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </transition-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="add_info_box">
|
|
|
@@ -617,6 +644,8 @@ export default {
|
|
|
fullBrief: "",
|
|
|
plaText: "",
|
|
|
isBrief: 0,
|
|
|
+ ending: null,
|
|
|
+ dragging: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -626,6 +655,51 @@ export default {
|
|
|
change(val) {
|
|
|
console.log(val);
|
|
|
},
|
|
|
+
|
|
|
+ handleDragStart(e, item) {
|
|
|
+ this.dragging = item;
|
|
|
+ },
|
|
|
+ handleDragEnd(e, item, t) {
|
|
|
+ if (this.ending.id === this.dragging.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let newItems;
|
|
|
+ if (t == 0) {
|
|
|
+ newItems = [...this.raceOver.driQuestion.data];
|
|
|
+ } else if (t == 1) {
|
|
|
+ newItems = [...this.raceOver.tarDesign.data];
|
|
|
+ } else {
|
|
|
+ newItems = [...this.raceOver.actiDesign.data];
|
|
|
+ }
|
|
|
+ const src = newItems.indexOf(this.dragging);
|
|
|
+ const dst = newItems.indexOf(this.ending);
|
|
|
+ newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
|
|
|
+ console.log(newItems);
|
|
|
+
|
|
|
+ if (t == 0) {
|
|
|
+ this.raceOver.driQuestion.data = newItems;
|
|
|
+ } else if (t == 1) {
|
|
|
+ this.raceOver.tarDesign.data = newItems;
|
|
|
+ } else {
|
|
|
+ this.raceOver.actiDesign.data = newItems;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.dragging = null;
|
|
|
+ this.ending = null;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDragOver(e) {
|
|
|
+ // 首先把div变成可以放置的元素，即重写dragenter/dragover
|
|
|
+ // 在dragenter中针对放置目标来设置
|
|
|
+ e.dataTransfer.dropEffect = "move";
|
|
|
+ },
|
|
|
+ handleDragEnter(e, item) {
|
|
|
+ // 为需要移动的元素设置dragstart事件
|
|
|
+ e.dataTransfer.effectAllowed = "move";
|
|
|
+ this.ending = item;
|
|
|
+ },
|
|
|
+
|
|
|
jump(t) {
|
|
|
var a = document.getElementById(t);
|
|
|
var b = document.getElementsByClassName("right")[0];
|
|
|
@@ -821,6 +895,7 @@ export default {
|
|
|
name: file.name,
|
|
|
url: data.Location,
|
|
|
type: type1,
|
|
|
+ id: "driData" + _this.raceOver.driQuestion.data.length,
|
|
|
});
|
|
|
_this.imgChange(null, null, type1, jsonType);
|
|
|
} else if (jsonType == 1) {
|
|
|
@@ -828,6 +903,7 @@ export default {
|
|
|
name: file.name,
|
|
|
url: data.Location,
|
|
|
type: type1,
|
|
|
+ id: "tarData" + _this.raceOver.tarDesign.data.length,
|
|
|
});
|
|
|
_this.imgChange(null, null, type1, jsonType);
|
|
|
} else {
|
|
|
@@ -835,6 +911,7 @@ export default {
|
|
|
name: file.name,
|
|
|
url: data.Location,
|
|
|
type: type1,
|
|
|
+ id: "actData" + _this.raceOver.actiDesign.data.length,
|
|
|
});
|
|
|
_this.imgChange(null, null, type1, jsonType);
|
|
|
}
|
|
|
@@ -1157,10 +1234,13 @@ export default {
|
|
|
flex-wrap: nowrap;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
- margin: 8px 0 0 10px;
|
|
|
+ margin: 10px 0 0 10px;
|
|
|
height: 40px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.stepRightNav > div {
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
.stepRightNav:hover {
|
|
|
color: #999;
|
|
|
}
|
|
|
@@ -1262,6 +1342,7 @@ export default {
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
min-height: 50px;
|
|
|
+ transition: all linear 0.3s;
|
|
|
}
|
|
|
|
|
|
.chapter_upload_t {
|
zengyicheng