{% extends "Intranet/Global.php.twig" %}

{% block body %}
    <div class="col-lg-3">
        <div id="moussakaWedit">
            <div class="draggable"></div>
            <div class="draggable"></div>
            <div class="draggable"></div>
            <div class="draggable"></div>
            <div class="draggable"></div>
            <div class="draggable"></div>

        </div>


    </div>



{{ JS.module('dragzone','image/dropzone') }}

<link rel="stylesheet" type="text/css" href="/admin/js/menu/wdContextMenu/css/contextmenu.css" />

<script type="text/html" id="div50">
    <div style="border: 1px greenyellow dashed;">caca</div>
</script>
<script type="text/html" id="handler">

</script>


    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="/admin/js/menu/wdContextMenu/src/Plugins/jquery.contextmenu.js"></script>



    <script>

        var menuAction = function menuAction(){
            alert('ouiiii');
        };
        var option = { width: 150, items: [
            { text: "Image", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
            //this is a split line
            { type: "splitLine" },
            //this is a parent item, which has some sub-menu items
            { text: "Frame", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [
                { text: "Columns", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [
                    { text: "2 Columns", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0062-16.gif", alias: "3-1", action: menuAction },
                    { text: "3 Columns", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0063-16.gif", alias: "3-2", action: menuAction }
                ]
                },
                { text: "Fixed size frame", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0096-16.gif", alias: "2-1", action: menuAction },
                { text: "Prout", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0111-16.gif", alias: "2-3", action: menuAction },
                { text: "toto", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0122-16.gif", alias: "2-4", action: menuAction }
            ]
            },
            { type: "splitLine" },
            { text: "Bla", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },
            { text: "Bli", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
                { text: "Blo", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
                { text: "Blu", icon: "/admin/js/menu/wdContextMenu/sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
            ]
            }
        ]
        };







        $(function main(){
            $('#moussakaWedit').contextmenu(option).sortable({
             //   revert: true
                distance: 1,
                tolerance:'pointer',
                //  grid: [ 80, 80 ]
            });
            $('.draggable').draggable({
                connectToSortable:'#moussakaWedit',

            })
        });
    </script>
    <style>
        #moussakaWedit{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            text-wrap: normal;
        }
        .draggable{
            background-color: #8E9CB2;
            z-index: 1000;
            width: 100px;
            display: inline-block;
            height: 100px;
            border: 1px dashed #0B2F20;
        }
    </style>
    {% include '/Intranet/Dev/HtmlWysiwyg/elements.php.twig' %}
{% endblock %}