sortablejs / vue.draggable Goto Github PK
View Code? Open in Web Editor NEWVue drag-and-drop component based on Sortable.js
Home Page: https://sortablejs.github.io/Vue.Draggable/
License: MIT License
Vue drag-and-drop component based on Sortable.js
Home Page: https://sortablejs.github.io/Vue.Draggable/
License: MIT License
$ npm run build
...
ERROR in static/js/vendor.52d13b282ee5b836d061.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/.2.0.3@vuedraggable/src/vuedraggable.js:18,0]
$
The resulting vendor.js
is not uglified/minified.
Hi, @David-Desmaisons ,
I want callback after dragging the element, but i found that the options of 'onEnd' do not work.
Here is my demo : https://jsfiddle.net/iwuyou/hfo98xuc/
Hello.
bower install vue.draggable -> Package vue.draggable not found.
I'm getting the following error: TypeError: dragableForDirective is undefined
.
The relevant line in the traceback seems to be this one:
This happens just after Vue.use(VueDragableFor)
.
Is there any information you'd like me to add?
I need to get the event
variable on onUpdate
event in the component where I'm using the draggable
component, but overriding the onUpdate
method doesn't work, not sure why.
<template>
<draggable :list="locations" :options="draggableOptions">
<li v-for="location in locations">
{{ location.name }}
</li>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return{
locations: [
{id: 1, name: "location1"},
{id: 2, name: "location2"},
{id: 3, name: "location3"}
],
draggableOptions: {
onUpdate: function (event) {
console.log(event); // never executed
},
},
}
},
}
</script>
How can I get the event
variable from my component after update the list sorting? After move an item to another position, I need its id
, evt.oldIndex
and evt.newIndex
.
if i use :list="list" but the list is come from state. that may course some proublems.
Great library, works better out of the box than vue-sortable in my opinion.
One improvement I think is to only required the needed lodash modules for your directive.
Now the entire lodash library is included (about 80kb minified):
var _ = require("lodash");
You could simply require the needed modules (about 21kb minified):
var _clone = require("lodash/clone");
var _merge = require("lodash/merge");
var _isString = require("lodash/isString");
var _each = require("lodash/each");
.. which would save about 60kb.
html:
<div id="main">
<h1>Vue Dragable For</h1>
<div v-for="item in list">
<div v-dragable-for="element in item" options='{"group":"people"}'>{{element.name}}</div>
<hr>
</div>
</div>
js :
var vm = new Vue({
el: "#main",
data: {
list: [
[{
name: "John"
}, {
name: "Joao"
}, {
name: "Jean"
}],
[{
name: "Juan"
}, {
name: "Edgard"
}, {
name: "Johnson"
}]
],
},
methods: {
add: function() {
this.list.push({
name: 'Juan'
});
},
replace: function() {
this.list = [{
name: 'Edgard'
}]
}
}
});
Current Action: I drag an item from one list to another list
Expected Result: onEnd of the item sort, the item should be shown in the DOM and VM state in the new dragged position
Current Result: onEnd of the item sort, the item is shown in the original DOM position as well as the VM state. It would then run a function to update it in the VM before the new changes are reflected are a later stage.
===
The current (example) scenario I have is I have 2 lists with 2 different IDs and within the lists there can be items that can be dragged from one list to another.
When I drag one item from one list to another, I call the 'onEnd' event to try to detect which list ID the item is dropped on, so that I can make an API call to update the position change on the database.
However, due to the DOM cancellation, during the 'onEnd' event (or any other event actually), I end up detecting the original list ID as the item will simply revert back to the original position and placement of the list before it was moved.
I don't see how I am able to detect the ID of the list when the user drops the item (ends the drag). I am able to detect it using the onMove event, however I am not sure if that's the base practice. What I would have to do then is to maintain the ID of the list in component state as the user drags it around, and only onEnd event do I read the component state and send it to the server.
Any suggestions would be welcomed!
Fiddle: https://jsfiddle.net/32ao2rpm/29/
To reproduce this bug, drag every item from list 1 to list 2.
When list 1 doesn't contain items anymore, try to put back an item from list 2 to list 1.
You will see that this doesn't work while using a transition group.
I am creating a dashboard app with widgets and using Bootstrap for the responsive.
This is what I am doing:
<div class="row">
<draggable :list="widgets">
<div v-for="(widget, index) in widgets" :class="'col-lg-' + widget.cols">
<chart-widget :setting="widget" v-on:remove="removeWidget"></chart-widget>
</div>
</draggable>
</div>
chart-widget
is a component to show the widget. I wrap the chart-widget
inside a col <div>
. The dragging works, but it doesn't show a dragging element when I drag. The behavior looks like this: https://youtu.be/f1sAd5VDLeQ
How could I make this work?
Hi friend,
Today, I want to add the vueDraggablefor to my project, but i failed.
I always failed in build the js, the console log tell me that: "Cannot find module 'vuedragablefor' from '/Users/wuxiaolian/Documents/workspace/121dian-activity/self-project/src'".
Why it find the 'src' folder, not the node_module folder?
Then i created a new project do then same actions, and i got the same results.
Do you have any idears? Thanks for your time.
It seems that the dragged item is not being classed with sortable-drag
.
Here's a fiddle where the background of the dragging element should turn red:
https://jsfiddle.net/bd3n92be/
Thank you for this component!
Our app has two-level nested draggable items and has list
defined/mapped.
When dragging an item in the inner list, sometimes the DOM may update incorrectly, and when it happens, the item being dragged will jump to the beginning of the list. The vue data, however, is correct/as expected. So it seems like the DOM is updated inconsistently w.r.t. the event, whereas the vue data is fine.
We tried to make a reproducible demo: https://jsfiddle.net/6sha4vv6/1/
Dragging Wildcard Courses x
to the place of Multiple Courses x
and release can cause the former to jump to the first position.
I have two nested components and when I drag one inner component to another outer component, only the view updating (with DOM manipulation I guess), the model stays the same.
How can I make the model update?
Hi friends,
This is a little problem, in the package.json file dependencies in "sortablejs": "^1.4.2"
, but in the vuedragablefor.js line 142 var Sortable = require("Sortablejs");
. Each time to move my project, always told cannot find 'Sortablejs'. I think it maybe case sensitive in OS.
When I drag an element across nested components inside a <transition-group>
(so that I can have animated sorting), upon releasing the drag, it appears for a second in its old place before ending up in the drop target.
I made a fiddle for this: http://jsfiddle.net/bvjfa9xk/2/
Hello!
In our App, we need to make an xhr call to store the dropped element and getting back his "child" elements. I make it in the onAdd like this:
Vue.component('ha-page', {
template: '#page-template',
props: ['page'],
methods: {
onAdd: function (event) {
var templateId = $(event.clone).data('template_id');
self.$http.post('/groups', {template_id: templateId}).then(
function (xhr) {
// Success
Vue.set(event.item, 'fields', xhr.body.group_fields);
Vue.set(event.item, 'id', xhr.body.group.id);
toastr.error('Group created.');
},
function (xhr) {
//Fail
toastr.error('Group creation fail.');
}
);
}
}
});
But this lines do not update the new element of the list:
Vue.set(event.item, 'fields', xhr.body.group_fields);
Vue.set(event.item, 'id', xhr.body.group.id);
Is there a fancy way to update the new Vue element dropped in the list ?
Thx!
Now, no error on compile with gulp... but not working anymore...
The change made in v2.02 seem fatal for me...
I notice you change install
I have tried to use in my component like this
<script type="text/babel">
import draggable from 'vuedraggable'
export default {
components: [draggable],
....
=> no error, but drag n drop not working
i haved tried without component section => no error but not working
I have tried to use with old method:
import VueDraggable from 'vuedraggable'
Vue.use(VueDraggable)
=> Error message when component start on webpage and not working.
So, i'm back to v2.01 version and i have apply the workaround of cgarnier.
=> works fine.
The following jsfiddle shows the problem.
https://jsfiddle.net/hqxranrd/6/
You may try to drag item from list 1 to list 2. While sortable.js works fine and display the correct item, you can see from the list below that the data is not synchronized as the lists above.
Plugin doesn't seem to work when element has conditional statements (ie. v-if).
<img v-dragable-for="..." v-if="statement" :src="..." />
No console errors either, just doesn't render list.
When using v-for on components and sending props to the component, the visual outputs don't display the new order but the Vue data property keeps the new order.
I believe, the indexing and element properties are getting mixed up somewhere. If you move an item between lists then the visual display items are incorrectly labeled but the Vue data is correct. (Edit:) Try moving John below Joao, then move Joao to the next list - you will then see John in the second list (in the grey area).
JSFiddle: https://jsfiddle.net/hellozach/31nqy8dp/
Hi,
How can i disable the drag and drop effect on a specific item ?
I'm not sure but i didn't see any options to do that, maybe it's a feature to develop :)
Thanks by advance.
For example, in examples/index.html
Maybe you're aware already, but "dragable" is a misspelling and is used throughout this package. When I was setting it up, it took me a little while to figure out why my 'v-draggable-for' directive wasn't working, but it was because I hadn't noticed the misspelling.
Feel free to reject this if it's not a concern, especially since updating it would be a breaking change, but I wanted to point it out just in case.
Thanks!
Currently, Vue.Draggable only allows to drag and drop div
elements which get enclosed in an outer div
. But sometimes, one might want to drag and drop li
inside a ul
or ol
, or tr
inside a tbody
.
So, it would be nice if one could configure if a div
element is created as outer element for the draggable objects, or something else like a ul
or tbody
.
@David-Desmaisons I want to cancel a drag if the http request that is triggered on the @Move event fails. I've tried returning false (as per documentation here), but the item is not returned to the initial position.
How can I do this? If it helps, I'm just building kanbas board, so basically if the API call fails, I'd like the task to remain on the correct column / list, so the user knows that the task status was not updated (eventually I'll show a popup with this as well).
Thanks,
@David-Desmaisons
Hi my friend, today I tried the plug-in draggable. I find the problem that i will work perfect in a same html,like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/David-Desmaisons/Vue.Dragable.For/v1.0.3/src/vuedragablefor.js"></script>
</head>
<body>
<div id="main">
<h1>Vue Dragable For</h1>
<div class="drag">
<h2>Dragable v-dragable-for</h2>
<div class="dragArea">
<div v-dragable-for="element in list">{{element.name}}</div>
</div>
</div>
<div class="normal">
<h2>Normal v-for</h2>
<div class="dragArea">
<div v-for="element in list">{{element.name}}</div>
</div>
</div>
<button @click="add">Add</button>
<button @click="replace">Replace</button>
</div>
<script>
var vm = new Vue({
el: "#main",
data: {
list:[{name:"John"},
{name:"Joao"},
{name:"Jean"} ]
},
methods:{
add: function(){
this.list.push({name:'Juan'});
},
replace: function(){
this.list=[{name:'Edgard'}]
}
}
});
</script>
</body>
</html>
But when i use the plug as a child component, it will failed to write the list name.
Here is in App.vue
<template>
<div id="main">
<h1>Vue Dragable For</h1>
<div class="drag">
<h2>Dragable v-dragable-for</h2>
<div class="dragArea">
<div v-dragable-for="element in list">{{element.name}}</div>
</div>
</div>
<div class="normal">
<h2>Normal v-for</h2>
<div class="dragArea">
<div v-for="element in list">{{element.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
list: [
{name: 'xioah1'},
{name: 'xioah2'},
{name: 'xioah3'}
]
}
}
}
</script>
And the result is this(I got the warn message:'vue.common.js:986[Vue warn]: Error when evaluating expression "element.name".'):
Vue Dragable For
Dragable v-dragable-for
Normal v-for
xioah1
xioah2
xioah3
You can find that i can't list all values in the array, i worry about that the original function of 'Vue.directive('for')' is not working.
"vue": "^1.0.26", "vuedraggable": "^1.0.9"
This example:
https://jsfiddle.net/j6mdt645/
Hi, I'm trying to implement an application that uses Vue.Draggable to sort a collection that is stored in a Vuex store.
The problem is related to the DOM modifications Vue.Draggable / SortableJS does. Is there any way to disable this behaviour and let Vuex reorganize the DOM from the state?
P.D: I attach a jsfiddle with the Vue.Draggable example that shows my problem.
https://jsfiddle.net/sqssmhtz/15/
Thanks for your help!
Hi there, im trying to make a card game, and if i use the "move" prop, i get a lot of events, so i see that @EnD exists, and it only trigger when u finish moving, but im having the following issue:
I have a component called Spot, so i have many spots where cards can be, in Spot component i use Draggable to drag and drop cards, in this case im using @EnD="moveCard" but see screenshots to understand what happen:
<template>
<div id="container">
<ul class="deck">
<draggable :list="cards" :options="{group:'solitaire'}" @end="moveCard" :id="'spot-'+number" class="draggableArea">
<card v-for="card in cards" :instance="card"></card>
</draggable>
</ul>
</div>
</template>
<style scoped>
#container{
background-color:#90FF0E;
border:1px solid #583BFF;
width:130px;
height:200px;
}
#container ul {
display:table-cell;
list-style-type:none;
}
#container ul li {
position:relative;
top:-12px;
}
.draggableArea {
min-height: 100px;
min-width: 100px;
border:2px solid rgb(255,133,100);
}
</style>
<script>
import Card from './Card'
import draggable from 'vuedraggable'
export default{
data(){
return{
}
},
components:{
Card,
draggable
},
props: ['cards','number'],
methods: {
moveCard: function (event) {
console.log(event)
window.Event.$emit('movement',this.generateMovementInstructions(event))
},
move: function (event) {
return false
},
generateMovementInstructions: function (event) {
return {
//card: event,
from: this.detectSpotNumber(event.from.id),
to: this.detectSpotNumber(event.to.id)
}
},
detectSpotNumber: function (string) {
return parseInt(string.replace('spot-',''))
}
}
}
</script>
Ok using that code, look to sequence of screen shots:
here we got a new game, the first spot with cards is the number 5, and at his right is number 6.
so i move the 7 to a right spot, and it shows From and To as left spot id.
and when i return it to left spot (5), it shows From and To as id of right spot.
so alaways it is using from and to as (origin value).. can someone help me?
I have an issue where one of my elements are being hidden. I have no idea how to debug the issue but I have confirmed it's related to :list="tabs"
as if I removed that, it all works as expected.
Here is a portion of my template:
<draggable class="nav nav-tabs" :element="ul" :list="tabs">
<li class="nav-item" v-for="tab in tabs">
<a href="#" class="nav-link" :class="{ active: tab.active }" @click.prevent="selectTab(tab)">
<i :class="tab.icon" v-if="tab.icon"></i>
<span v-show="tab.options.showname">{{ tab.name }}</span>
<span @click.prevent.stop="requestRemoveTab(tab)" v-if="tab.options.closeable">×</span>
</a>
</li>
</draggable>
Here is one of my tab creations that utilises all possible options:
this.createTab(`roomlist`, {
icon: 'fa fa-plus',
name: 'Rooms',
component: 'roomlistTabView',
active: true,
options: {
showname: false,
closeable: false
}
});
The result is that everything displays fine until I start dragging tabs around. What happens then is the second span element (containing ×
) is being hidden using the inline css display: none
. I can confirm that the other elements are being displayed. Adding in :list="tabs"
from what I know is optional in my case and it works just fine either way but the issue is with that, for sure.
If I'm also correct, v-if
would not render the element unless it returns true so something strange is definitely going on there hence why I'm unsure how to debug it. Anyone know what might be going on?
ERROR in ./~/vuedraggable/dist/vuedraggable.js
Module not found: Error: Cannot resolve module 'Sortable' in /Users/lzxb/Documents/zhima-admin-webapp/node_modules/vuedraggable/dist
@ ./~/vuedraggable/dist/vuedraggable.js 202:4-204:6
Hello David,
The latest version of your lib produce theses message on my code:
Uncaught (in promise) Sortable: el
must be HTMLElement, and not [object Comment]
Uncaught TypeError: Cannot read property 'length' of undefined(…)
Uncaught TypeError: Cannot read property 'length' of undefined(…)
<ul class="listeConnectees">
<draggable :list="sourcefiltree" class="dropZone" :options="{group: 'elements', ghostClass: 'elementDeplace', animation:'150'}">
<li v-for="element in sourcefiltree">{{ element.titre }}</li>
</draggable>
</ul>
<ul class="listeConnectees">
<draggable :list="destination" class="dropZone" :options="{group: 'elements', ghostClass: 'sortable-ghost', animation: '150'}">
<li v-for="element in destination">{{ element.titre }}</li>
</draggable>
</ul>
It's not easy to do a jsfeedle because it's in a component who it make ajax request to populate the two lists on beforeMount() event ...
Can you have idea about the reason of this bugs ???
Best regards
Dominique
Hello, error:
Uncaught TypeError: plugin.apply is not a function
version:
"vue": "^1.0.26", "vuedraggable": "^2.5.0-rc0"
Is there a way to solve?
During NPM install I get the following error:
Registry returned 404 for GET on https://registry.npmjs.org/Sortable
I am guessing it requires https://www.npmjs.com/package/sortablejs ?
Hi David,
i have a problem with the syncing to the model. I tested v-dragable-for with
data: {
list:[
{name:"John"},
{name:"Joao"},
{name:"Jean"}
]
which works fine. It is a Array of objects. Now my Model is not a Array of objects. It is a Object of Objects.
Then the syncing to the view doesn't work. Here is how i get my Questiongroups:
getQuestiongroups: function(){
this.$http.get('admin/osamaker/api/group/get')
.then(function (data){
this.$set('questiongroups', data.data);
})
.catch(function (err){
console.log(err);
});
The result is a Object with the name 'questiongroups'. Here is a Screenshot
now there is an empty questions-array in each questiongroup-object. I have a method where i create and save new questions to a questiongroup. After the saveAction is done the questiongroups-object looks like:
So now its Object(questiongroups) > Object(questiongroup) > Object(questions) > Object(question)
I want to reorder the Questions so that every key = "question_order" (marked red) gets the new $index. This doesnt work. The $index is not changing after draging/sorting the list.
So thats for the beginning. I will provide a jsfiddle as soon as possible :-)
edit: here is the promised jsfiddle
https://jsfiddle.net/38a9sq4t/
best regards,
Robin
Hello, first and foremost, thanks for the great Vuejs component, it is very useful!
Now to my issue. If I use the draggable component outside the transition-group tag I don't get a Vuejs error but the entire group of list items is draggable instead of each individual list item. Please see the code below:
<draggable element="div" :list="machine.jobs" :options="draggableOptions">
<transition-group name="list-complete">
<div v-for="(job, index) in machine.jobs"
v-bind:key="job.jobNumber"
class="list-complete-item"
>
<b>{{ job.jobNumber }}</b>
</div>
</transition-group>
</draggable>
If I try to use the draggable component within the transition-group tag I get a Vue error stating that the children must be keyed. This is understandable seeing as the draggable element does not have a unique key and the documentation states that all elements within the transition-group must be uniquely keyed.
Can I use the draggable component with Vuejs transition-group feature? Am I missing something in my code that would allow this combination? If not, is this a feature that can be added to the draggable component in the future?
Is it possible to track an item when it's dragged to a different group with the new group id where the item is inserted? It's the same idea like you can track the: oldIndex & newIndex, but then for swapping between groups.
example: https://jsfiddle.net/4tp3hz87/13/
Hello,
First thing, thank you for this job of re-writing.
I have a problem to integrate you component in a project.
when i do npm install vuedraggable --save => i see the installation of your component and sortablejs v1.4.2
in "node_modules" folder => folders "vuedraggable" and "sortablejs" are present and containt files of each js components
but when i launch 'gulp'
i have a error:
Module not found: Error: Can\'t resolve \'Sortable\
in vuedraggable.min.js
glup seem looking for this files in theses folders:
[/usr/share/nginx/myproject/site/node_modules/vuedraggable/dist/node_modules] [/usr/share/nginx/myproject/site/node_modules/vuedraggable/node_modules] [/usr/share/nginx/myproject/site/node_modules/node_modules] [/usr/share/nginx/myproject/site/node_modules/Sortable] [/usr/share/nginx/myproject/site/node_modules/Sortable] [/usr/share/nginx/myproject/site/node_modules/Sortable.js] [/usr/share/nginx/myproject/site/node_modules/Sortable.json]
but not in good place:
/usr/share/nginx/myproject/site/node_modules/sortablejs/Sortable.js
same thing after i launch npm update
The only workaround i find is copy Sortable.js in "root folder" node_modules... not very beautiful...
I never have this issue with dragable-for. May be some path missing in package.json of vuedraggable component or elsewhere ???
Best regards, and, one more time, thank you for this job.
Hi. I'm migrating my widget from nestedSortable to vue.
I have nested list and I need to limit list levels to 2. So I decided to use Sortable.js group put option. But how can I use a function in group put option with Vue.Draggable?
I'm trying to set up my Sortable options like so:
sortableOptions: { draggable : ".list-item", onUpdate : function() { console.log('updated!'); } }
The onUpdate doesn't trigger though, since your version of the function overrides it during your _merge.
Is there a different way you suggest me hooking into that event so that I can also use it to execute some code? Or can it be updated to call your function, then the one passed through in an option?
Thanks!
On iOS (Google Chrome & Safari) the touch events have interference with scrolling and it causes a flickering effect when you start pulling down the page.
Not sure if it is occurring on Android as well.
This is a js fiddle showing the problem:
https://jsfiddle.net/u5ecgtsj/6/
As you can see from the above jsfiddle, when dragging from list 1 to list 2, "Jean" should be added, but it turns out "John" is added to the list.
Basically everything works fine when following the example step by step but when incorporating it based on my constraints getting errors.
Implemented as follows:
<template>
<div id="req-wrap">
<div class="drag">
<template v-for="term in terms" :term="term">
<h2>{{term.number}}</h2>
<div class="dragArea" >
<template v-dragable-for="course in term.term_items" options='{"group":"term_items"}'>
<p>{{course.name}}</p>
</template>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
import DegreePlans from '../../components/degreeplans.vue'
export default {
data: function() {
return {
terms: [{
"number": 1,
"term_items": [
{
"name": "REQ 101",
"courses": [
"REQ 101"
]
},
{
"name": "Multiple Courses",
"courses": [
"REQ 102",
"REQ 103"
]
},
{
"name": "Wildcard Courses",
"wildcards": [
{
"name": "Upper division",
"rules": [
{
"department_code": "REQ",
"match_string": "*",
"minimum_match_number": 300,
"maximum_match_number": 499,
"minimum_hours": 1,
"maximum_hours": 6,
"exclude": false
}
]
},
{
"name": "Lower Division",
"rules": [
{
"department_code": "REQ",
"match_string": "*",
"minimum_match_number": 0,
"maximum_match_number": 199,
"minimum_hours": 1,
"maximum_hours": 6,
"exclude": false
}
]
}
]
}
]
},
{
"number": 2,
"term_items": [
{
"name": "REQ 201",
"courses": [
"REQ 101"
]
},
{
"name": "Multiple Courses",
"courses": [
"REQ 202",
"REQ 203"
]
},
{
"name": "Wildcard Courses",
"wildcards": [
{
"name": "Upper division",
"rules": [
{
"department_code": "REQ",
"match_string": "*",
"minimum_match_number": 300,
"maximum_match_number": 499,
"minimum_hours": 1,
"maximum_hours": 6,
"exclude": false
}
]
},
{
"name": "Lower Division",
"rules": [
{
"department_code": "REQ",
"match_string": "*",
"minimum_match_number": 0,
"maximum_match_number": 199,
"minimum_hours": 1,
"maximum_hours": 6,
"exclude": false
}
]
}
]
}
]
}]
}
},
route: {
activate: function() {
this.$http.get('degree_plans', []).then(function(response) {
console.log(response.data)
this.name = response.data.name
this.id = response.data.id
this.terms = response.data.terms
})
}
}
}
</script>
Hello, I've got 2 draggable components, from the first one objects can be cloned into the second draggable component. The problem Arises when cloning two object of the same type because they become interlinked (and changing data on one changes the data on the other) Is there a way to do a deep clone of one item?
Is there any examples for Sortable.js event handling?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.