2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Ich habe ihn schon lange nicht mehr gesehen. Es war das erste Mal, dass er ein Produkt herstellte. Es gibt immer einige menschenfeindliche Designs. Das ist richtig, es ist die Drag-and-Drop-Sammlung auf dem Titel und das Wischen mit der linken Maustaste, um das Produkt zu löschen. Als ich mir alle wichtigen Apps ansah, konnte ich keine mit dieser Funktion finden. Er sagte immer wieder, dass er es mir zeigen würde, nachdem ich es benutzt hatte, vielleicht hatte er es vergessen.
Als ich auf eine solche Nachfrage stieß, versuchte ich auch, mit ihm zu kommunizieren, indem ich beispielsweise den Warenkorb zum Löschen von Produkten usw. verwendete und eine Logik änderte, die jeder akzeptieren kann, aber er hatte seine eigenen Ideen, und ich musste mich dafür entscheiden respektiere es.
Nachdem ich lange nach der Drag-and-Drop-Sammlungsfunktion gesucht hatte, habe ich ein von einem Meister geschriebenes Drag-and-Drop-Plug-In verwendet und es entsprechend angepasst, da meine Anforderung nicht die Anzeige der Sammlung und der Seite erfordert Sprünge beim Sammeln, daher werden einige Änderungen vorgenommen, die jedoch im Allgemeinen ähnlich sind. Hier finden Sie die offizielle Website des Plug-Ins.
vue.draggable chinesische Dokumentation – itxst.com
Hinweis: Während der Entwicklung wird beim Überwachen der Start- und Endereignisse des Ziehens ein Fehler gemeldet. Wenn dies der Fall ist, wird empfohlen, dass Sie ihn selbst beheben oder die gleiche Methode wie ich verwenden, um den Ziehvorgang usw. zu überwachen. Dies variiert je nach auf die Bedürfnisse. Hängen Sie den Code am Ende an:
- <template>
- <div id="app">
- <h1>商品列表</h1>
- <div class="container">
- <div class="row">
- <!-- @change="onDragEnd" @start="start" @end="onEnd" :move="onMove" delay="1000" -->
- <div class="col-md-6">
- <draggable v-model="leftItems" :group="group" delay="1000"
- @change="onDragEnd" :move="onMove"
- animation="300" dragClass="dragClass" ghostClass="ghostClass">
- <!-- <u-swipe-action :show="item.show" :index="index"
- v-for="(item, index) in leftItems" :key="item.id"
- @click="click" @open="open"
- :options="options"
- > -->
- <div class="item" v-for="(item, index) in leftItems" :key="item.id" >{{ item.name }}</div>
- <!-- </u-swipe-action> -->
- </draggable>
- </div>
-
- <div class="col-md-6">
- <draggable v-model="rightItems" :group="group"
- @change="onDragEnd" :move="onMove">
- <div v-for="(item, index) in rightItems" :key="index" @longpress="aaa(index)" :class="['item',item.status==true?'shake':'']">{{ item.name }}</div>
- </draggable>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import draggable from 'vuedraggable';
-
- export default {
- components: {
- draggable
- },
- data() {
- return {
- disabled: false,
- btnWidth: 180,
- show: false,
- options: [
- {
- text: '删除',
- style: {
- backgroundColor: '#dd524d'
- }
- }
- ],
- timerId: null,//计时器id
- group: {
- name: "itxst",
- pull: true, //可以拖出
- put: true, //可以拖入
- },
- leftItems: [{
- id: 1,
- show: false,
- status: false,
- name: '商品1'
- },
- {
- id: 2,
- show: false,
- status: false,
- name: '商品2'
- },
- {
- id: 3,
- show: false,
- status: false,
- name: '商品3'
- },
- {
- id: 4,
- show: false,
- status: false,
- name: '商品4'
- },
- {
- id: 5,
- show: false,
- status: false,
- name: '商品5'
- },
- {
- id: 6,
- show: false,
- status: false,
- name: '商品6'
- },
- ],
- rightItems: [{
- id: 1,
- show: false,
- status: false,
- name: '商品1'
- },
- {
- id: 2,
- show: false,
- status: false,
- name: '商品2'
- },
- {
- id: 3,
- show: false,
- status: false,
- name: '商品3'
- },
- {
- id: 4,
- show: false,
- status: false,
- name: '商品4'
- },
- {
- id: 5,
- show: false,
- status: false,
- name: '商品5'
- },
- {
- id: 6,
- show: false,
- status: false,
- name: '商品6'
- },
- ]
- };
- },
- onLoad() {
-
- },
- methods: {
- click(index) {
- this.leftItems.splice(index, 1);
- this.$u.toast(`删除了第${index}个cell`);
- },
- // 如果打开一个的时候,不需要关闭其他,则无需实现本方法
- open(index) {
- // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
- // 原本为false,再次设置为false会无效
- this.leftItems[index].show = true;
- this.leftItems.map((val, idx) => {
- if(index != idx) this.leftItems[idx].show = false;
- })
- },
-
- start(e) {
- console.log(e, 'kasihi ');
- },
- onEnd() {
- console.log(e, '结束了 ');
- },
- onMove(e) { // keyi huanyuan
- clearTimeout(this.timerId)
- console.log('如果能监听到要在这里清楚计时器');
- return this.canFormSet()
- },
- aaa(index) {
- this.rightItems[index].status = true
- this.timerId = setTimeout(() => {
- this.rightItems[index].status = false
- clearTimeout(this.timerId)
- }, 500)
- },
- onDragEnd(event) {
- console.log(event);
- // if (event.newIndex !== event.oldIndex) {
- // const movedItem = this.leftItems[event.oldIndex];
- // this.leftItems.splice(event.oldIndex, 1);
- // this.rightItems.push(movedItem);
- // 判断是否可以形成集合跳转页面
- if (this.canFormSet()) {
- // 跳转到另一个页面的逻辑
- console.log('路由去往新的页面');
- // this.$router.push('/another-page');
- } else {
- // 如果不能形成集合,则复原
- console.log('复原');
-
- // this.rightItems.pop();
- // this.leftItems.splice(event.newIndex, 0, movedItem);
- }
- console.log('6666');
- clearTimeout(this.timerId)
- // } else {
- // console.log('else');
- // // Revert the move if it's not a valid combination
- // const movedItem = this.rightItems.pop();
- // this.leftItems.splice(event.newIndex, 0, movedItem);
- // }
- },
-
- canFormSet() {
- // 如果可以形成集合,返回 true;否则返回 false
- return false; // 示例中默认返回 true
- }
- }
- };
- </script>
-
- <style scoped lang="scss">
- .shake {
- width: 100px;
- height: 100px;
- background-color: red;
- transform-origin: center;
- animation: shake .5s infinite ease-in-out;
- }
-
- @keyframes shake {
-
- 0%,
- 100% {
- transform: rotate(-5deg);
- /* transform: translate(-50%, -50%) rotate(-5deg); */
- }
-
- 50% {
- transform: rotate(5deg);
- }
- }
-
- .ghostClass {
- background-color: blue !important;
- }
-
- .chosenClass {
- background-color: red !important;
- opacity: 1 !important;
- }
-
- .dragClass {
- background-color: blueviolet !important;
- opacity: 1 !important;
- box-shadow: none !important;
- outline: none !important;
- background-image: none !important;
- }
-
- .container {
- width: 100%;
- margin-top: 20px;
- }
- .row {
- width: 100%;
- display: flex;
- }
- .col-md-6 {
- width: 100%;
- // display: flex;
- // flex-wrap: wrap;
- }
-
- .item {
- width: 100px;
- height: 100px;
- margin-left: 20px;
- border: 1px solid #ccc;
- padding: 10px;
- margin-bottom: 10px;
- background-color: #f9f9f9;
- }
- </style>
Jeder hat den obigen Code gesehen und ich habe vor, ihn zu verwenden U-Wisch-Aktion Um die gleitende Löschfunktion zu implementieren, kann jedoch nur eine Zeile verschoben und gelöscht werden. Also habe ich einen Blick auf den Quellcode geworfen, und dann hatte ich eine Offenbarung. Ich habe in Zukunft auch einige Optimierungen vorgenommen Ihr Hinweis. Ich hoffe, er kann Ihnen helfen:
- <template>
- <view class="container">
- <movable-area class="box-info"
- v-for="(item, index) in items"
- :key="index">
- <movable-view
- style="width: 140px; height: 100px; background-color: #aa55ff;"
- :style="{widh}"
- :x="index * 10"
- :direction="'horizontal'"
- :out-of-bounds="false"
- >
- <view class="product">
- <view style="width: 100px;">{{item}}</view>
- <view class="move" @click="removeShop">删除</view>
- </view>
- </movable-view>
- </movable-area>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- items: ['商品1', '商品2']
- };
- },
- methods: {
- removeShop(index) {
- alert('删除商品操作')
- }
- }
- };
- </script>
-
- <style scoped lang="scss">
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- .box-info {
- display: flex;
- flex-wrap: wrap;
- height: 100px;
- width: 100px;
- background-color: #55ff7f;
- overflow: hidden;
- margin: 20px;
- .product {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 14px;
- color: #333;
- .move{
- background-color: #55aa00;
- width: 40px;
- height: 100px;
- writing-mode: vertical-rl;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- }
- </style>