最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入
首先在vue项目中,用npm包下载下来
npm install vuedraggable -S
下载下来后,引入插件,在你的vue文件的script标签里面这样引入
import draggable from 'vuedraggable'
别忘了下面要注册组件
components: {
draggable
},
然后就可以在template标签里面使用了
单个组件
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
2个组件左右结构
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="对外产品名称">
<el-input v-model="proAttribute.description" placeholder="对外产品名称" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="对外产品属性">
<template>
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
</template>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="对内产品名称">
<el-input v-model="proAttribute.description" placeholder="对内产品名称" style="width: 250px"></el-input>
</el-form-item>
<el-form-item label="对内产品属性">
<template>
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
</template>
</el-form-item>
</el-col>
</el-row>
下面贴一下详细用法
<template>
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default{
data(){
return{
msg:"这是测试组件",
colors: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
{
text: "Crimson",
},
{
text: "Blueviolet",
},
{
text: "Lightblue",
},
{
text: "Cornflowerblue",
},
{
text: "Skyblue",
},
{
text: "Burlywood",
}
],
startArr:[],
endArr:[],
count:0,
}
},
components: {
draggable
},
methods:{
getdata (evt) {
console.log(evt.draggedContext.element.text)
},
datadragEnd (evt) {
evt.preventDefault();
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.colors);
}
},
mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开,此代码真实有效
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
}
}
</script>
<style lang="scss" scoped>
.test{
border:1px solid #ccc;
}
.drag-item{
width: 200px;
height: 50px;
line-height: 50px;
margin: auto;
position: relative;
background: #ddd;
margin-top:20px;
}
.ghostClass{
opacity: 1;
}
.bottom{
width: 200px;
height: 50px;
position: relative;
background: blue;
top:2px;
left: 2px;
transition: all .5s linear;
}
</style>
options配置如下
var sortable = new Sortable(el, {
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
sort: true, // sorting inside list
delay: 0, // time in milliseconds to define when the sorting should start
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled: false, // Disables the sortable if set to true.
store: null, // @see Store
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
handle: ".my-handle", // Drag handle selector within list items
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
draggable: ".item", // Specifies which items inside the element should be draggable
ghostClass: "sortable-ghost", // Class name for the drop placeholder
chosenClass: "sortable-chosen", // Class name for the chosen item
dragClass: "sortable-drag", // Class name for the dragging item
dataIdAttr: 'data-id',
forceFallback: false, // ignore the html5 DnD behaviour and force the fallback to kick in
fallbackClass: "sortable-fallback", // Class name for the cloned dom Element when using forceFallback
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},
// Element is chosen
onChoose: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},
// Element dragging started
onStart: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},
// Element dragging ended
onEnd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.to; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
},
// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
// same properties as onEnd
},
// Changed sorting within list
onUpdate: function (/**Event*/evt) {
// same properties as onEnd
},
// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
// same properties as onEnd
},
// Element is removed from the list into another list
onRemove: function (/**Event*/evt) {
// same properties as onEnd
},
// Attempt to drag a filtered element
onFilter: function (/**Event*/evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
},
// Event when you move an item in the list or between lists
onMove: function (/**Event*/evt, /**Event*/originalEvent) {
// Example: http://jsbin.com/tuyafe/1/edit?js,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // TextRectangle {left, top, right и bottom}
evt.related; // HTMLElement on which have guided
evt.relatedRect; // TextRectangle
originalEvent.clientY; // mouse position
// return false; — for cancel
},
// Called when creating a clone of element
onClone: function (/**Event*/evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
}
});
向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等
作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。
这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等
在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue
在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集
常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。
安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为
使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!