JSFiddle - React, Tailwind, and code Playground

by Kamal Kumawat

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/css/onsenui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/js/onsenui.js"></script>
<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
    <ons-page id="home">
      <ons-toolbar>
        <div class="left">
            <ons-toolbar-button onclick="fn.toggleMenu()">
              <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">Onsen Drag with Splitter</div>
      </ons-toolbar>
      <div id="stage">
        <ons-gesture-detector>
            <img src="Onsen.png" alt="" class="draggable" />
            <img src="Monaca.png" alt="" class="draggable" />
        </ons-gesture-detector>
      </div>
    </ons-page>
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.toggleMenu()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

<ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.toggleMenu()">
          <ons-icon...

CSS

.draggable {     
         position: absolute;
      }

JavaScript

window.fn = {};
        fn.vtop = 0;
        fn.vleft = 0; 
        
        window.fn.toggleMenu = function() {
          document.getElementById('menu').toggle();
        };
        
        window.fn.load = function(page) {
          document.getElementById('content').load(page).then(fn.toggleMenu());
        };
        
        window.fn.disableGD = function(){
            ons.GestureDetector(document.getElementById('menu')).dispose();
        }
        
        window.fn.enableGD = function(){
            var dragItems = document.querySelectorAll('.draggable');
            for (var i = 0; i < dragItems.length; i++) {
                dragItems[i].addEventListener('dragstart', function(e) {   
                    fn.vtop = parseInt(e.target.style.top || 0,10);
                    fn.vleft = parseInt(e.target.style.left || 0,10);      
                });
                dragItems[i].addEventListener('drag', function(e) {   
                    e.target.style.top = parseInt(fn.vtop + e.gesture.deltaY) + 'px';
                    e.target.style.left = parseInt(fn.vleft + e.gesture.deltaX) + 'px'; 
                });
                dragItems[i].addEventListener('dragend', function(e) {   
                  // THIS EVENT IS NOT REQUIRED UNLESS YOU ARE DETECTING DROP
                    fn.vtop = parseInt(e.target.style.top || 0,10);
                    fn.vleft = parseInt(e.target.style.left || 0,10);    
                });
            }
        }
           
        document.addEventListener("show",function(e){
            if(e.target.id == 'home'){
                fn.disableGD();
                fn.enableGD();
            }
        });