Socket
Socket
Sign inDemoInstall

vuedraggable

Package Overview
Dependencies
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vuedraggable - npm Package Compare versions

Comparing version 2.17.0 to 2.18.0

dist/vuedraggable.common.js

134

package.json
{
"name": "vuedraggable",
"version": "2.17.0",
"version": "2.18.0",
"description": "draggable component for vue",
"main": "dist/vuedraggable.js",
"files": [
"dist/vuedraggable.js"
],
"main": "dist/vuedraggable.umd.min.js",
"private": false,
"scripts": {
"serve": "vue-cli-service serve ./example/main.js --open",
"build:doc": "vue-cli-service build ./example/main.js --dest docs --mode development",
"build": "vue-cli-service build --name vuedraggable --entry ./src/vuedraggable.js --target lib",
"lint": "vue-cli-service lint src example",
"prepublishOnly": "npm run lint && npm run build",
"test:unit": "vue-cli-service test:unit"
},
"keywords": [

@@ -17,55 +23,83 @@ "vue",

"Sortable.js",
"web-components"
"component"
],
"directories": {
"example": "examples",
"test": "test"
},
"dependencies": {
"sortablejs": "^1.7.0"
"sortablejs": "^1.8.3",
"vue": "^2.5.22"
},
"devDependencies": {
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.16.0",
"bower": "^1.8.4",
"connect": "^3.6.6",
"connect-livereload": "^0.5.4",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.3",
"gulp-clean": "^0.3.2",
"gulp-filter": "^4.0.0",
"gulp-flatten": "^0.3.0",
"gulp-jasmine": "^2.4.0",
"gulp-jshint": "^2.1.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.2.4",
"gulp-main-bower-files": "^1.6.3",
"gulp-rename": "^1.4.0",
"gulp-size": "^2.1.0",
"gulp-uglify": "^1.5.4",
"gulp-useref": "^3.1.6",
"jasmine-istanbul-phantom": "^1.1.1",
"jshint": "^2.9.6",
"jshint-stylish": "^2.2.0",
"opn": "^4.0.2",
"serve-index": "^1.8.0",
"serve-static": "^1.13.2"
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-plugin-unit-jest": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"bootstrap": "^4.3.1",
"component-fixture": "^0.4.1",
"element-ui": "^2.5.4",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"vue-cli-plugin-component": "^1.10.5",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.5.21"
},
"scripts": {
"test": "gulp test"
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"author": {
"name": "David Desmaisons",
"email": "desmaisons_david@hotmail.com"
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"bugs": {
"url": "https://github.com/David-Desmaisons/Vue.Draggable/issues"
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
},
"license": "MIT",
"homepage": "https://github.com/David-Desmaisons/Vue.Draggable#readme",
"repository": {
"type": "git",
"url": "https://github.com/David-Desmaisons/Vue.Draggable.git"
}
"files": [
"dist/*.css",
"dist/*.map",
"dist/*.js",
"src/*"
],
"module": "dist/vuedraggable.common.min.js"
}

@@ -5,5 +5,5 @@ <p align="center"><img width="140"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>

[![GitHub open issues](https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg?maxAge=2592000)](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)
[![npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
[![npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=30)](https://www.npmjs.com/package/vuedraggable)
[![npm download per month](https://img.shields.io/npm/dm/vuedraggable.svg)](https://www.npmjs.com/package/vuedraggable)
[![npm version](https://img.shields.io/npm/v/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
[![npm version](https://img.shields.io/npm/v/vuedraggable.svg?maxAge=30)](https://www.npmjs.com/package/vuedraggable)
[![Package Quality](http://npm.packagequality.com/shield/vuedragablefor.svg)](http://packagequality.com/#?package=vuedraggable)

@@ -22,4 +22,6 @@ [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

## Live Demo
## Live Demos
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/

@@ -68,3 +70,3 @@

<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>

@@ -305,2 +307,4 @@ ```

Limitation: neither header or footer slot works in conjunction with transition-group.
#### Header

@@ -323,3 +327,3 @@ Use the `header` slot to add none-draggable element inside the vuedraggable component.

Use the `footer` slot to add none-draggable element inside the vuedraggable component.
Important: it should be used in conjunction with draggable option to tag draggable element.
Important: it should be used in conjunction with draggable option to tag draggable elements.
Note that footer slot will always be added after the default slot regardless its position in the template.

@@ -337,27 +341,8 @@ Ex:

### Gotchas
- Drag operation with empty list:
To be able to drag items on an empty draggable component, set a min-height greater than 0 on the `draggable` component or the `transition-group` if any and ensure the transition group has display: block; otherwise height won't work.
### Fiddle
- Simple:
https://jsfiddle.net/dede89/sqssmhtz/
- Two Lists:
https://jsfiddle.net/dede89/32ao2rpm/
- Example with list clone:
https://jsfiddle.net/dede89/t3m5krea/
- Example with transition-group:
https://jsfiddle.net/dede89/m2v0orcn/
- Example with table:
https://jsfiddle.net/dede89/L54yu3L9/
- Example with remove button
on list elements
https://jsfiddle.net/dede89/5Leuhh1n/
### Example
* [Clone](https://sortablejs.github.io/Vue.Draggable/#/custom-clone)
* [Handle](https://sortablejs.github.io/Vue.Draggable/#/handle)
* [Transition](https://sortablejs.github.io/Vue.Draggable/#/transition-example-2)
* [Nested](https://sortablejs.github.io/Vue.Draggable/#/nested-example)
* [Table](https://sortablejs.github.io/Vue.Draggable/#/table-example)

@@ -364,0 +349,0 @@ ### Full demo example

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc