https://blog.51cto.com/u_11200178/2323724
https://m.imooc.com/wenda/detail/383243
<script>
data(){
return {
// 数据集合
list:[]
}
},
methods: {
async getHttp() {
// http请求
const res = await fetch('http://www.qingqiu.com').then((res)=>res.json())
this.list = res.rs
}
}
</script>
<div class="content-list">
<li class="list" v-for="item in list" :key="item.id">{{item.text}}</list>
<div>
20多个好用的 Vue 组件库,请查收|应用程序
https://www.itxst.com/sortablejs/bqubqya3.html
http://www.baishima.com/
jquery vue区别
https://www.itheima.com/news/20211015/164833.html
工资项目
https://www.cnblogs.com/bitbw/p/15392418.html
https://blog.csdn.net/weixin_32637935/article/details/115061441
https://www.freesion.com/article/24861079152/
vuedraggable firefox拖动
created() {
document.body.ondrop = function(event) {
event.preventDefault();
event.stopPropagation();
};
},
解决火狐浏览器拖拽打开新窗口的问题
火狐浏览器实现拖拽有2个坑：
1、在dragstart事件中，必须要使用ev.dataTransfer.setData()，否则，即使在html中设置了元素 draggable=true，拖拽也是无效的。
dragstart: function (ev) {
ev.dataTransfer = ev.originalEvent.dataTransfer;
var domId = ev.target.id;
ev.dataTransfer.setData("domId",domId);
},
2、火狐拖放后，总会默认打开百度搜索，如果是图片，则会打开图片。
解决办法：
在drop事件中增加阻止事件冒泡。
dragDrop: function (ev) {
ev.stopPropagation();
ev.preventDefault();
ev.dataTransfer = ev.originalEvent.dataTransfer;
//do something
}
阻止火狐浏览器在 vue-draggable组件时拖动 打开新窗口
火狐浏览器在文字拖动时会打开链接，图片拖动时打开新窗口，这是火狐浏览器的特性。
vue-draggable组件就是需要拖动的，就与这个特性契合了，但大多时候在项目中我们都不需要火狐的这个特性。
那么如何解决呢，只需要在使用vue-draggable的vue页面的中禁止火狐的这个功能，
/* 阻止火狐浏览器在 vue-draggable组件时拖动 打开新窗口 */
document.body.ondrop = function(event) {
event.preventDefault();
event.stopPropagation();
};
可以放在vue实例生命周期的 created或moutend中，这样就可以在页面创建时用到。
https://www.jianshu.com/p/3c3780d521ce
<template>
<div id="app">
<img src="./assets/logo.png">
<VueResize></VueResize>
<el-card class="box-card leftCard">
<vuedraggable v-model="list" :sort="false" :group="{ name: 'course', pull: 'clone' }">
<div v-for="item in list" :key="item" class="item"><el-button>{{ item }}</el-button></div>
</vuedraggable>
</el-card>
<el-card class="box-card leftCard">
<vuedraggable v-model="list2" :group="{ name: 'course', pull: 'clone' }">
<div v-for="item in list2" :key="item" class="item">
<vue-draggable-resizable :w="100" :h="100" :parent="true">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</vue-draggable-resizable>
</div>
</vuedraggable>
</el-card>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
<router-view/>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import vuedraggable from 'vuedraggable'
import row1col2 from './components/row1col2.vue'
import VueResize from './components/VueResize.vue'
export default {
components: {
vuedraggable,row1col2,VueResize
},
name: 'App',
data: function () {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: ['VueResize','row1col2','el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
list2: [],
}
},
methods: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.box-card{width:100%;}
</style>
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
<p>你可以进行拖拽和移动<br>
X坐标为: {{ x }};Y坐标为: {{ y }} <br> 宽为: {{ width }} ;高为: {{ height }}</p>
</vue-draggable-resizable>
</div>
</template>
<script>
//import VueDraggableResizable from 'vue-draggable-resizable'
// 在使用的组件里引用
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
data: function () {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
methods: {
onResize: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>
<template>
<el-row >
<el-col :span=12>
<vuedraggable v-model="list" :group="{ name: 'course'}">
<div v-for="item in list" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-col>
<el-col :span=12>
<vuedraggable v-model="list2" :group="{ name: 'course' }">
<div v-for="item in list2" :key="item" class="item">
<component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
</div>
</vuedraggable>
</el-col>
</el-row>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
components: {
vuedraggable,
},
name: 'row1col2',
data () {
return {
form: {},
attrs: { 'type': 'success' }, // , disabled: true
list: [],
list2: [],
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
}
}
</script>
<style scoped>
.el-col {
height:40px;
line-height:40px;
border:1px solid #000;
}
.item>div{height:40px;}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})