<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$sortableLeft = new \Kendo\UI\Sortable('#sortable-left');
// select the container for the Sortable
$sortableLeft->connectWith('#sortable-right')->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'))->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->start('onStart')->move('onMove')->end('onEnd')->change('onChange')->cancel('onCancel');
echo $sortableLeft->render();
$sortableRight = new \Kendo\UI\Sortable('#sortable-right');
// select the container for the Sortable
$sortableRight->connectWith('#sortable-left')->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'))->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->start('onStart')->move('onMove')->end('onEnd')->change('onChange')->cancel('onCancel');
echo $sortableRight->render();
?>
<div class="demo-section list-wrapper">
<h3 class="title">Reorder Items
</h3>
<ul id="sortable-left" style="min-height: 41px;">
<li class="list-left">Item 1</li>
<li class="list-left">Item 2</li>
<li class="list-left">Item 3</li>
</ul>
<ul id="sortable-right" style="min-height: 41px;">
<li class="list-right">Item 1</li>
<li class="list-right">Item 2</li>
<li class="list-right">Item 3</li>
</ul>
</div>
<div class="demo-section">
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$sortableSidebar = new \Kendo\UI\Sortable('#sidebar');
// select the container for the Sortable
$sortableSidebar->filter('>div')->connectWith('#main-content')->cursor('move')->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableSidebar->render();
$sortableMain = new \Kendo\UI\Sortable('#main-content');
// select the container for the Sortable
$sortableMain->connectWith('#sidebar')->cursor('move')->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableMain->render();
?>
<div class="dash-head"></div>
<div class="panel-wrap">
<div id="sidebar">
<div id="profile" class="widget">
<h3>Profile <span class="collapse k-icon k-i-arrowhead-n"></span></h3>
<div>
<div class="profile-photo"></div>
<h4>Lynda Schleifer</h4>
<p>Sales Associate</p>
</div>
</div>
<div id="teammates" class="widget">
<h3>Teammates <span class="collapse k-icon k-i-arrowhead-n"></h3>
<div>
<div class="team-mate">
<img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h4>Andrew Fuller</h4>
require_once '../include/header.php';
$sortableListA = new \Kendo\UI\Sortable('#sortable-listA');
// select the container for the Sortable
$sortableListA->connectWith('#sortable-listB')->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableListA->render();
$sortableListB = new \Kendo\UI\Sortable('#sortable-listB');
// select the container for the Sortable
$sortableListB->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableListB->render();
$sortableListC = new \Kendo\UI\Sortable('#sortable-listC');
// select the container for the Sortable
$sortableListC->connectWith('#sortable-listD')->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableListC->render();
$sortableListD = new \Kendo\UI\Sortable('#sortable-listD');
// select the container for the Sortable
$sortableListD->connectWith('#sortable-listC')->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
echo $sortableListD->render();
?>
<div class="demo-section one-way">
<div class="list-wrapper">
<ul id="sortable-listA">
<li class="list-item">Apples</li>
<li class="list-item">Grapefruits</li>
<li class="list-item">Bananas</li>
</ul>
<ul id="sortable-listB">
<li class="list-item">Cranberries</li>
<li class="list-item">Pineapples</li>
<li class="list-item">Strawberries</li>
