Examples.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import ipyvuedraggable as d\n",
    "from traitlets import (Any, Unicode, List)\n",
    "\n",
    "# Output a dummy Draggable instance, so ipyvue gets loaded. This does not \n",
    "# happen automatically when only VueTemplate is used\n",
    "d.Draggable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def getItems():\n",
    "    return [\n",
    "        {\n",
    "          'id': 1,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/1.jpg\",\n",
    "          'title': \"Brunch this life?\",\n",
    "          'subtitle': \"Subtitle 1\"\n",
    "        },\n",
    "        {\n",
    "          'id': 2,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/2.jpg\",\n",
    "          'title': \"Winter Lunch\",\n",
    "          'subtitle': \"Subtitle 2\"\n",
    "        },\n",
    "        {\n",
    "          'id': 3,\n",
    "          'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/3.jpg\",\n",
    "          'title': \"Oui oui\",\n",
    "          'subtitle': \"Subtitle 3\"\n",
    "        }\n",
    "      ]\n",
    "\n",
    "def getItems2():\n",
    "    return [\n",
    "    {\n",
    "      'id': 4,\n",
    "      'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/4.jpg\",\n",
    "      'title': \"Brunch this weekend?\",\n",
    "      'subtitle': \"Subtitle 4\"\n",
    "    },\n",
    "    {\n",
    "      'id': 5,\n",
    "      'avatar': \"https://s3.amazonaws.com/vuetify-docs/images/lists/5.jpg\",\n",
    "      'title': 'Summer BBQ',\n",
    "      'subtitle': \"Subtitle 5\"\n",
    "    }\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyDraggable(v.VuetifyTemplate):\n",
    "    items =  List(getItems()).tag(sync=True)\n",
    "\n",
    "    items2 = List(getItems2()).tag(sync=True)\n",
    "\n",
    "    template = Unicode('''\n",
    "        <v-content>\n",
    "          <v-container fluid>\n",
    "            <v-layout align-start justify-center>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    FIRST LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items\" :group=\"{name:'people'}\" style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items\">\n",
    "                    <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-sub-title v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    SECOND LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items2\" :group=\"{name:'people'}\" style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items2\">\n",
    "                  <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-sub-title v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "            </v-layout>\n",
    "          </v-container>\n",
    "        </v-content>\n",
    "        ''').tag(sync=True)\n",
    "    \n",
    "    \n",
    "MyDraggable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def makeListItem(item):\n",
    "    return v.ListItem(children=[\n",
    "        v.ListItemAvatar(children=[\n",
    "            v.Html(tag='img', attributes={'src': item['avatar']})\n",
    "        ]),\n",
    "        v.ListItemContent(children=[\n",
    "            v.ListItemTitle(children=[item['title']]),\n",
    "            v.ListItemSubtitle(children=[item['subtitle']])\n",
    "        ])\n",
    "    ])\n",
    "\n",
    "dg1 = d.Draggable(\n",
    "    v_model=getItems(),\n",
    "    group={'name': 'people'},\n",
    "    children=[makeListItem(item) for item in getItems()])\n",
    "\n",
    "def update_dg1(change):\n",
    "    dg1.children=[makeListItem(item) for item in dg1.v_model]\n",
    "    \n",
    "dg1.observe(update_dg1, names=['v_model'])\n",
    "\n",
    "\n",
    "dg2 = d.Draggable(\n",
    "    v_model=getItems2(),\n",
    "    group={'name': 'people'},\n",
    "    children=[makeListItem(item) for item in getItems2()])\n",
    "\n",
    "def update_dg2(change):\n",
    "    dg2.children=[makeListItem(item) for item in dg2.v_model]\n",
    "    \n",
    "dg2.observe(update_dg2, names=['v_model'])\n",
    "\n",
    "\n",
    "v.Content(children=[\n",
    "    v.Container(fluid=True, children=[\n",
    "        v.Layout(align_start=True, justify_center=True, children=[\n",
    "            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[\n",
    "                v.List(two_line=True, children=[\n",
    "                    v.Subheader(children=['FIRST LIST']),\n",
    "                    dg1\n",
    "                ])\n",
    "            ]),\n",
    "            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[\n",
    "                v.List(two_line=True, children=[\n",
    "                    v.Subheader(children=['SECOND LIST']),\n",
    "                    dg2\n",
    "                ])\n",
    "            ])\n",
    "        ])\n",
    "    ])\n",
    "])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyDraggableArea(v.VuetifyTemplate):\n",
    "    items =  List(getItems() + getItems2()).tag(sync=True)\n",
    "\n",
    "    items2 = List().tag(sync=True)\n",
    "\n",
    "    template = Unicode('''\n",
    "        <!-- Toplevel draggable is used to cancel drop -->\n",
    "        <draggable id=\"catchAll\" class=\"droptarget\" :group=\"{name:'people'}\">\n",
    "        <v-content>\n",
    "          <v-container fluid>\n",
    "            <v-layout align-start justify-center>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    FIRST LIST\n",
    "                  </v-subheader>\n",
    "                  <draggable\n",
    "                      id=\"source\"\n",
    "                      :move=\"checkMove\"\n",
    "                      v-model=\"items\" \n",
    "                      :group=\"{name:'people', pull:'clone'}\"\n",
    "                      style=\"min-height: 10px\">\n",
    "                    <template v-for=\"item in items\">\n",
    "                    <v-list-item :key=\"item.id\">\n",
    "                    <v-list-item-avatar>\n",
    "                      <img :src=\"item.avatar\">\n",
    "                    </v-list-item-avatar>\n",
    "                    <v-list-item-content>\n",
    "                      <v-list-item-title v-html=\"item.title\"></v-list-item-title>\n",
    "                      <v-list-item-subtitle v-html=\"item.subtitle\"></v-list-item-sub-title>\n",
    "                    </v-list-item-content>\n",
    "                  </v-list-item>\n",
    "                </template>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "              <v-flex xs4 class=\"elevation-1 pa-3 ma-2\">\n",
    "                <v-list two-line>\n",
    "                  <v-subheader>\n",
    "                    DROP AREA\n",
    "                  </v-subheader>\n",
    "                  <draggable v-model=\"items2\" :group=\"{name:'people'}\" class=\"droptarget\">\n",
    "                    <div class=\"droparea\">Nr of items: {{ items2.length }}</div>\n",
    "                  </draggable>\n",
    "                </v-list>\n",
    "              </v-flex>\n",
    "            </v-layout>\n",
    "          </v-container>\n",
    "        </v-content>\n",
    "        </draggable>\n",
    "        ''').tag(sync=True)\n",
    "\n",
    "    css = Unicode('''\n",
    "        /* Hide dragged element in target */\n",
    "        .droptarget > [draggable=true] {\n",
    "            display: none;\n",
    "        }\n",
    "\n",
    "        .sortable-ghost.no-drop {\n",
    "           cursor: no-drop;\n",
    "        }\n",
    "\n",
    "        .droparea {\n",
    "            height: 200px;\n",
    "            border: 1px solid black;\n",
    "        }\n",
    "    ''').tag(sync=True)\n",
    "\n",
    "\n",
    "    methods = Unicode('''{\n",
    "        checkMove(e) {\n",
    "            duplicate = this.items2.some(item => item.id === e.draggedContext.element.id)\n",
    "            canMove = e.to.id !== \"source\" && !duplicate;\n",
    "            cancelDrop = e.to.id === \"catchAll\"\n",
    "\n",
    "            if (canMove && !cancelDrop) {\n",
    "                e.dragged.classList.remove('no-drop')\n",
    "            } else {\n",
    "                e.dragged.classList.add('no-drop')\n",
    "            }\n",
    "\n",
    "            return canMove;\n",
    "        },\n",
    "    }''').tag(sync=True)\n",
    "    \n",
    "\n",
    "MyDraggableArea()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}