vue-drag-and-drop-list - npm Package Compare versions

Comparing version 0.2.1 to 0.3.1

dist/vue-drag-and-drop-list.js

 /*!
- * Vue-drag-and-drop-list.js v0.2.1
+ * Vue-drag-and-drop-list.js v0.3.1
  * (c) 2016 Hejx
@@ -43,5 +43,5 @@ * Released under the MIT License.
 
-        // Add CSS classes. See documentation above
-        this.el.classList.add("dndDragging");
-        setTimeout(function() { this.el.classList.add("dndDraggingSource"); }.bind(this), 0);
+        // Add CSS classes. IE9 not support 'classList'
+        this.el.className += " dndDragging";
+        setTimeout(function() { this.el.className += " dndDraggingSource "; }.bind(this), 0);
 
@@ -69,3 +69,3 @@ // Workarounds for stupid browsers, see description below
 
-      this.handleDragend = function () {
+      this.handleDragend = function (event) {
         event = event.originalEvent || event;
@@ -98,7 +98,7 @@
         // Clean up
-        this.el.classList.remove("dndDragging");
+        this.el.className = this.el.className.replace("dndDragging", "");
         var _el = this.el;
         setTimeout(function(){
           // here this.el will be null
-          _el.classList.remove("dndDraggingSource");
+          _el.className = _el.className.replace("dndDraggingSource", "");
         }, 0);
@@ -121,6 +121,8 @@ dndDragTypeWorkaround.isDragging = false;
        * Workaround to make element draggable in IE9
+       * http://stackoverflow.com/questions/5500615/internet-explorer-9-drag-and-drop-dnd
        */
       this.handleSelected = function () {
         if (this.dragDrop) this.dragDrop();
-      }.bind(this);
+        return false;
+      }
 
@@ -161,2 +163,3 @@ this.el.setAttribute('draggable', true);
       this.handleDragover = function (event) {
+
         event = event.originalEvent || event;
@@ -215,3 +218,4 @@
 
-        this.el.classList.add("dndDragover");
+        if (this.el.className.indexOf("dndDragover") < 0) this.el.className += " dndDragover";
+
         event.preventDefault();
@@ -223,3 +227,3 @@ event.stopPropagation();
 
-      this.handleDrop = function () {
+      this.handleDrop = function (event) {
         event = event.originalEvent || event;
@@ -280,3 +284,3 @@
         event = event.originalEvent || event;
-        this.el.classList.remove("dndDragover");
+        this.el.className = this.el.className.replace("dndDragover", "");
         setTimeout(function() {
@@ -302,2 +306,3 @@ if (this.el.className.indexOf("dndDragover") < 0) {
         targetPosition = relativeToParent ? targetPosition : 0;
+        console.log(mousePointer, targetPosition, (targetSize));
         return mousePointer < targetPosition + targetSize / 2;
@@ -357,3 +362,3 @@ };
         placeholderNode.parentNode && placeholderNode.parentNode.removeChild(placeholderNode);
-        this.el.classList.remove("dndDragover");
+        this.el.className = this.el.className.replace("dndDragover", "");
         return true;
@@ -360,0 +365,0 @@ }

index.js

@@ -31,5 +31,5 @@
 
-        // Add CSS classes. See documentation above
-        this.el.classList.add("dndDragging");
-        setTimeout(function() { this.el.classList.add("dndDraggingSource"); }.bind(this), 0);
+        // Add CSS classes. IE9 not support 'classList'
+        this.el.className += " dndDragging";
+        setTimeout(function() { this.el.className += " dndDraggingSource "; }.bind(this), 0);
 
@@ -57,3 +57,3 @@ // Workarounds for stupid browsers, see description below
 
-      this.handleDragend = function () {
+      this.handleDragend = function (event) {
         event = event.originalEvent || event;
@@ -86,7 +86,7 @@
         // Clean up
-        this.el.classList.remove("dndDragging");
+        this.el.className = this.el.className.replace("dndDragging", "");
         var _el = this.el;
         setTimeout(function(){
           // here this.el will be null
-          _el.classList.remove("dndDraggingSource");
+          _el.className = _el.className.replace("dndDraggingSource", "");
         }, 0);
@@ -109,6 +109,8 @@ dndDragTypeWorkaround.isDragging = false;
        * Workaround to make element draggable in IE9
+       * http://stackoverflow.com/questions/5500615/internet-explorer-9-drag-and-drop-dnd
        */
       this.handleSelected = function () {
         if (this.dragDrop) this.dragDrop();
-      }.bind(this);
+        return false;
+      }
 
@@ -149,2 +151,3 @@ this.el.setAttribute('draggable', true);
       this.handleDragover = function (event) {
+
         event = event.originalEvent || event;
@@ -203,3 +206,4 @@
 
-        this.el.classList.add("dndDragover");
+        if (this.el.className.indexOf("dndDragover") < 0) this.el.className += " dndDragover";
+
         event.preventDefault();
@@ -211,3 +215,3 @@ event.stopPropagation();
 
-      this.handleDrop = function () {
+      this.handleDrop = function (event) {
         event = event.originalEvent || event;
@@ -268,3 +272,3 @@
         event = event.originalEvent || event;
-        this.el.classList.remove("dndDragover");
+        this.el.className = this.el.className.replace("dndDragover", "");
         setTimeout(function() {
@@ -290,2 +294,3 @@ if (this.el.className.indexOf("dndDragover") < 0) {
         targetPosition = relativeToParent ? targetPosition : 0;
+        console.log(mousePointer, targetPosition, (targetSize));
         return mousePointer < targetPosition + targetSize / 2;
@@ -345,3 +350,3 @@ };
         placeholderNode.parentNode && placeholderNode.parentNode.removeChild(placeholderNode);
-        this.el.classList.remove("dndDragover");
+        this.el.className = this.el.className.replace("dndDragover", "");
         return true;
@@ -348,0 +353,0 @@ }

package.json

 {
   "name": "vue-drag-and-drop-list",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "A Vue.js directives with the HTML5 drag & drop API.",
@@ -5,0 +5,0 @@ "main": "dist/vue-drag-and-drop-list.js",

README.md

@@ -1,2 +0,59 @@
-# vue-drag-and-drop
-A Vue.js directives with the HTML5 drag & drop API.
+#vue-drag-and-drop-list
+
+[![npm](https://img.shields.io/npm/v/vue-drag-and-drop-list.svg?maxAge=2592000?style=flat-square)]()
+
+> Vue directives that allow you to build sortable lists with the native HTML5 drag & drop API. It base on [Angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists)
+
+## Demo
+* [Simple Lists](https://hejx.herokuapp.com/vue-dndl/example/simple/list.html)
+* [Typed Lists](https://hejx.herokuapp.com/vue-dndl/example/itemTypes/item-types.html)
+* [Drag handler](https://hejx.herokuapp.com/vue-dndl/example/dragHandle/drag-handle.html)
+
+
+## Supported browsers
+
+IE9+ and all modern browsers are supported.
+
+**Touch devices are not supported**, because they do not implement the HTML5 drag & drop standard. However, you can use a [shim](https://github.com/timruffles/ios-html5-drag-drop-shim) to make it work on touch devices as well.
+
+
+## Installation
+
+```bash
+npm install vue-drag-and-drop-list --save
+```
+
+## Usage
+
+```js
+import Vue from 'vue';
+import vueDragAndDropList from 'vue-drag-and-drop-list';
+
+Vue.use(vueDragAndDropList);
+```
+
+or include as an inline script, like example.
+
+## Directives
+
+you should read the [Vue directive doc](http://vuejs.org/guide/custom-directive.html) first.
+
+* dnd-draggable
+* dnd-list
+* dnd-nodrag
+* dnd-handle
+
+doc comming soon！
+
+## Development
+
+```bash
+npm install
+npm run dev // rollup watch
+
+npm run build //rollup -c
+```
+
+## License
+
+MIT

TODO.md

@@ -6,1 +6,3 @@ ### TODOs
 2: dnd-list =>  inserted
+
+3: test

No alert changes

Improved metrics

Total package byte prevSize

55067

increased by3.81%

Lines of code

987

increased by0.71%

Number of lines in readme file

60

increased by1900%

No dependency changes