JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<app>
    <p>Using custom build of view, both same list and connected list sortable works</p>
    <ul v-sortable="list" class="sortable">
        <li v-repeat="item : list">{{item}}</li>
    </ul>
    <ul v-sortable="list2" class="sortable">
        <li v-repeat="item : list2">{{item}}</li>
    </ul>
    <p>{{list | json}}</p>
    <p>{{list2 | json}}</p>
    
    <button type="button" v-on="click: reverse()">Reverse arrays</button>
    <button type="button" v-on="click: append()">Append to arrays</button>
    <button type="button" v-on="click: prepend()">Prepend to arrays</button>
</app>

CSS

li {
    cursor: move    
}

JavaScript

/**
 * Vue.js v0.12.4
 * (c) 2015 Evan You
 * Released under the MIT License.
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):"object"==typeof exports?exports.Vue=e():t.Vue=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){function i(t){this._init(t)}var r=n(1),s=r.extend;s(i,n(9)),i.options={replace:!0,directives:n(27),elementDirectives:n(49),filters:n(52),transitions:{},components:{},partials:{}};var o=i.prototype;Object.defineProperty(o,"$data",{get:function(){return this._data},set:function(t){t!==this._data&&this._setData(t)}}),s(o,n(54)),s(o,n(55)),s(o,n(56)),s(o,n(57)),s(o,n(59)),s(o,n(60)),s(o,n(61)),s(o,n(62)),s(o,n(63)),s(o,n(64)),t.exports=r.Vue=i},function(t,e,n){var i=n(4),r=i.extend;r(e,i),r(e,n(5)),r(e,n(6)),r(e,n(2)),r(e,n(7)),r(e,n(8))},function(t,e,n){var i=n(1),r=n(3);e.assertProp=function(t,e){var n=t.options;if(!n)return!0;var r,s=n.type,o=!0;if(s&&(s===String?(r="string",o=typeof e===r):s===Number?(r="number",o="number"==typeof e):s===Boolean?(r="boolean",o="boolean"==typeof e):s===Function?(r="function",o="function"==typeof e):s===Object?(r="object",o=i.isPlainObject(e)):s===Array?(r="array",o=i.isArray(e)):o=e instanceof s),!o)return!1;var a=n.validator;return a&&!a.call(null,e)?!1:!0},e.commonTagRE=/^(div|p|span|img|a|br|ul|ol|li|h1|h2|h3|h4|h5|code|pre)$/,e.checkComponent=function(t,n,r){var s=t.tagName.toLowerCase();if("component"===s){var o=t.getAttribute("is");return t.removeAttribute("is"),o}return!e.commonTagRE.test(s)&&i.resolveAsset(n,"components",s)?s:r&&(s=i.attr(t,"component"))?s:void 0},e.createAnchor=function(t,e){return r.debug?document.createComment(t):document.createTextNode(e?"...