Question

我想制作两个具有可拖动视图的列表，并能够从一个列表插入另一个列表并将其更新。

例如，在下面的jsfiddle中，我想从底部列表中向顶部列表中插入“两个”，但是我也想将底部的“ thee”替换为底部的“三”。这有可能吗？

//express server
app.post('/register', (req, res) => {
 try {
  const {
   password,
   passwordConfirm
  } = req.body;
  if (password === passwordConfirm) {
   //...
  } else {
   res.status(400).json("Passwords aren't matching")
  }
 } catch (error) {
  res.status(500).send(error);
 }
})
//react function
onSubmitSignIn = () => {
 const {
  password,
  passwordConfirm
 } = this.state;
 let data = new FormData();
 data.append('password', password);
 data.append('passwordConfirm', passwordConfirm);

 fetch('http://localhost:3001/register', {
   method: 'post',
   body: data
  })
  .then(response => response.json())
  .then(user => {
   //logs error message here
   console.log(user)
  })
  //but I want to catch it here, and set the message to the state
  .catch(alert => this.setState({
   alert
  }))
}

https://jsfiddle.net/9omb1zL6/

我已经阅读了此问题，但对我而言无济于事：

Vue.Draggable: How to "drag an item onto another item" instead of adding/removing

更新

通过在列表下方添加放置区域，我已经取得了进步。尽管有了改进，但我仍然希望能够直接插入列表的元素之间，而不必先删除然后移动。

https://jsfiddle.net/9omb1zL6/3/

相关代码：

<div id="app">
  <h2>Drop and Insert</h2>
      <h4>Top</h4>
        <draggable v-model="top" :options="{group:{put: 'numbers'}}" @change="topChange">
          <div v-for="(element, index) in top" :key="index">{{element}}</div>
        </draggable>

      <h4>Bottom</h4>
      <draggable v-model="bottom" :options="{group: {name: 'numbers', pull: 'clone', revertClone : true}}">
        <div v-for="(element, index) in bottom" :key="index">{{element}}</div>
      </draggable>
</div>

new Vue({
  el: "#app",
  data: {
     top: [ 'one', 'thee', 'four'  ],
    bottom: [ 'one', 'two', 'three' ]
  },
  methods: {
    topChange(v) {
        console.log("topchange %o", v) ;
    }
  }
})

Vue可拖动插入和更新

0 个答案: